เกิดข้อผิดพลาดในการกำหนดสไตล์เครื่องหมายรายละเอียด/สรุปใน Safari/Webkit

เมื่อใช้แท็ก <details> ฉันต้องการแสดงสามเหลี่ยมพลิกทางด้านขวาขององค์ประกอบ <summary>

ดังนั้นแทนที่จะเป็นค่าเริ่มต้น:

▶ My Cool List (จัดชิดซ้าย)

ฉันต้องการทำสิ่งนี้:

My Cool list ▶ (จัดชิดขวา)

และนี่คือการทำงานใน Chrome:

โครเมี่ยมถูกต้อง

คำถามนี้ช่วยให้ฉันเขียน CSS ซึ่งได้ผล บน Chrome และ 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: "▼";
}

อย่างไรก็ตาม บน Safari (ทดสอบ Mojave บนเดสก์ท็อป + iOS14 + iOS12) สามเหลี่ยมฟลิปปีจะถูกผลักไปที่บรรทัดใหม่:

My Cool List
▶

ในซาฟารี:

ซาฟารีหักฟลิปปี้สามเหลี่ยม

แล้วฉันจะทำให้ Safari แสดงสามเหลี่ยมพลิกในบรรทัดเดียวกันเช่น Firefox + Chrome ได้อย่างไร ดูเหมือนว่าปัญหานี้มีสาเหตุมาจากการใช้ display: flex กับองค์ประกอบหลอก ::after ร่วมกัน แต่ฉันไม่ค่อยมีความรู้เกี่ยวกับการพัฒนาส่วนหน้ามากนัก ดังนั้นฉันจึงไม่รู้จะแก้ไขปัญหานี้อย่างไร


css webkit
person Patrick Kenny    schedule 07.11.2020    source แหล่งที่มา

คำตอบ (2)


arrow_upward
1
arrow_downward

ปรากฎว่า Safari ไม่รองรับแท็ก <p> ใน <summary>; เมื่อฉันลบแท็กเหล่านั้น ฉันไม่จำเป็นต้องใช้ flex เพื่อจัดตำแหน่ง pseudoelement ให้ถูกต้องด้วยซ้ำ

person Patrick Kenny    schedule 13.11.2020

arrow_upward
1
arrow_downward

คุณสามารถเพิ่ม CSS เฉพาะเบราว์เซอร์เพื่อแก้ไขปัญหา display: flex; สำหรับ <summary>

สำหรับซีเอสเอส

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

    details > summary { 

        display: block; 

    }
}}

สำหรับ SCSS

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

    details > summary { 

        display: block; 

    }
}}
person mithz07    schedule 11.05.2021