Kesalahan menata penanda Detail/Ringkasan di Safari/Webkit

Saat menggunakan tag <details>, saya ingin menampilkan segitiga flippy di sebelah kanan elemen <summary>.

Jadi, alih-alih default:

▶ My Cool List (rata kiri)

Aku ingin melakukan ini:

My Cool list ▶ (rata kanan)

Dan ini berfungsi di Chrome:

chrome benar

Pertanyaan ini membantu saya menulis CSS, yang berfungsi di Chrome dan Firefox:

// Right-align all summaries.
details > summary {
  list-style: none; // Remove the default arrow.
  display: flex;
  align-items: center; // Vertically center the arrow.
}
details > summary::-webkit-details-marker {
  display: none;
}
details > summary::after {
  content:  '▶';
}
details[open] > summary::after {
  content: "▼";
}

Namun, di Safari (menguji Mojave di desktop + iOS14 + iOS12), segitiga flippy didorong ke baris baru:

My Cool List
▶

Di Safari:

safari patah segitiga flippy

Jadi, bagaimana cara agar Safari menampilkan segitiga flippy di baris yang sama seperti Firefox + Chrome? Sepertinya masalah ini disebabkan oleh kombinasi penggunaan display: flex dengan pseudoelement ::after, tapi saya tidak tahu banyak tentang pengembangan frontend jadi saya bingung untuk menyelesaikannya.


css webkit
person Patrick Kenny    schedule 07.11.2020    source sumber

Jawaban (2)


arrow_upward
1
arrow_downward

Ternyata Safari tidak menangani tag <p> di <summary>; ketika saya menghapus tag tersebut, saya bahkan tidak perlu menggunakan flex untuk menyelaraskan elemen semu.

person Patrick Kenny    schedule 13.11.2020

arrow_upward
1
arrow_downward

Anda dapat menambahkan CSS khusus browser untuk mengatasi masalah display: flex; untuk <summary>.

Untuk CSS

@media not all and (min-resolution:.001dpcm) { @media {

    details > summary { 

        display: block; 

    }
}}

Untuk SCSS

    @media not all and (min-resolution:.001dpcm)
    { @supports (-webkit-appearance:none) {

    details > summary { 

        display: block; 

    }
}}
person mithz07    schedule 11.05.2021