เหตุใด <fieldset> จึงไม่สามารถยืดหยุ่นได้

ผมพยายามที่จะสไตล์fieldsetองค์ประกอบด้วยและdisplay: flexdisplay: inline-flex

แต่ก็ไม่ได้ทำงาน: flexทำตัวเหมือนblockและทำตัวเหมือนinline-flexinline-block

สิ่งนี้เกิดขึ้นทั้งบน Firefox และ Chrome แต่ใช้งานกับ IE ได้อย่างแปลกประหลาด

มันเป็นข้อบกพร่องหรือไม่? ฉันไม่พบที่fieldsetควรมีพฤติกรรมพิเศษใด ๆ ทั้งในHTML5หรือในรายละเอียดCSS เค้าโครงกล่องแบบยืดหยุ่น

fieldset, div {
    display: flex;
    border: 1px solid;
}

<fieldset>
    <p>foo</p>
    <p>bar</p>
</fieldset>
<div>
    <p>foo</p>
    <p>bar</p>
</div>

ตามที่Bug 984,869 - display: flexไม่ทำงานสำหรับองค์ประกอบปุ่ม ,

<button>ไม่สามารถนำไปใช้งานได้ (โดยเบราว์เซอร์) ใน CSS บริสุทธิ์ดังนั้นจึงเป็นบิตของกล่องดำจากมุมมองของ CSS ซึ่งหมายความว่าพวกเขาไม่จำเป็นต้องตอบสนองในลักษณะเดียวกับที่<div>ต้องการ

นี่ไม่ใช่ลักษณะเฉพาะของ flexbox เช่นเราไม่แสดงแถบเลื่อนถ้าคุณoverflow:scrollวางปุ่มและเราจะไม่ทำให้มันเป็นตารางหากคุณวางdisplay:tableไว้

<button>ก้าวกลับยิ่งขึ้นนี้ไม่ได้เฉพาะเจาะจงกับ พิจารณา <fieldset> และ <table> ซึ่งมีพฤติกรรมการแสดงผลพิเศษ:

data:text/html,<fieldset style="display:flex"><div>abc</div><div>def</div>

ในกรณีเหล่านี้ Chrome เห็นด้วยกับเราและไม่สนใจflex โหมดการแสดงผล (ตามที่เปิดเผยโดยข้อเท็จจริงที่ว่า "abc" และ "def" สิ้นสุดการซ้อนกันในแนวตั้ง) ความจริงที่ว่าพวกเขาทำสิ่งที่คุณคาดหวัง<button style="display:flex">อาจเป็นเพราะรายละเอียดการปฏิบัติ

ในการนำปุ่มไปใช้ของ Gecko เรา hardcode <button>(และ <fieldset>,และ <table>) เช่นเดียวกับการมีคลาสเฟรมเฉพาะ (และดังนั้นจึงเป็นวิธีเฉพาะในการจัดวางองค์ประกอบย่อย) โดยไม่คำนึงถึง displayคุณสมบัติ

หากคุณต้องการให้เด็ก ๆ จัดเรียงอย่างน่าเชื่อถือในโหมดเลย์เอาต์ในแบบข้ามเบราว์เซอร์วิธีที่ดีที่สุดของคุณคือใช้ wrapper-div ภายในปุ่มเช่นเดียวกับที่คุณจะต้องอยู่ภายใน <table>หรือก<fieldset>.

ดังนั้นข้อผิดพลาดนั้นถูกทำเครื่องหมายว่า "แก้ไขไม่ถูกต้อง"

นอกจากนี้ยังมีข้อผิดพลาด 1047590 - display: flex;ไม่ทำงานใน<fieldset>ขณะนี้ "ยืนยัน"

ข่าวดี : Firefox 46+ ดำเนิน flexbox <fieldset>สำหรับ ดูข้อผิดพลาด 1230207

ฉันพบนี้อาจจะมีข้อผิดพลาดบน Chrome และ Firefox ที่legendและfieldsetจะถูกแทนที่องค์ประกอบ

รายงานข้อบกพร่องแล้ว:

Bug Chrome (ยังเปิดอยู่)
Bug Firefox (แก้ไขตั้งแต่ v46)

วิธีแก้ปัญหาที่เป็นไปได้:

วิธีแก้ปัญหาที่เป็นไปได้คือใช้<div role="group">ใน HTML และใช้ใน CSS div[role='group']เป็นตัวเลือก

UPDATE

ในChrome เวอร์ชัน 83 buttonสามารถทำงานกับdisplay: inline-grid/grid/inline-flex/flexคุณสามารถดูตัวอย่างด้านล่าง:

button {
  display: inline-flex;
  height: 2rem;
  align-items: flex-end;
  width: 4rem;
  -webkit-appearance: none;
  justify-content: flex-end;
}

<!-- 

The align-items keyword should fail in Chrome 81 or earlier, but work in Chrome 83 or later. To see the error, the button needs styles that make it more of an extrinsic container. In other words, it needs a height or width set. 
 
-->
<button>Hi</button>
<input type="button" value="Hi">

โปรดติดดาวข้อบกพร่องของ Chrome เพื่อเพิ่มลำดับความสำคัญของข้อบกพร่อง

นี่เป็นข้อผิดพลาดใน Chrome โปรดเพิ่มดาวในปัญหานี้เพื่อเพิ่มความสำคัญที่ต้องแก้ไข: https://bugs.chromium.org/p/chromium/issues/detail?id=375693

ในเวลานั้นฉันได้สร้างตัวอย่างโค้ดสำหรับปากกาทั้งสามนี้เพื่อแสดงวิธีแก้ไขปัญหา พวกเขาสร้างขึ้นโดยใช้ CSS Grid สำหรับตัวอย่าง แต่เทคนิคเดียวกันสามารถใช้สำหรับ flexbox

ใช้ aria-labelledby แทนคำอธิบาย

นี่เป็นวิธีการที่เหมาะสมกว่าในการจัดการกับปัญหา ข้อเสียคือคุณต้องจัดการกับการสร้างรหัสเฉพาะที่ใช้กับทุกองค์ประกอบตำนานปลอม

https://codepen.io/daniel-tonon/pen/vaaGzZ

<style>
.flex-container {
    display: flex;
}
</style>

<fieldset aria-labelledby="fake-legend">
    <div class="flex-container">
        <div class="flex-child" id="fake-legend">
            I am as good accessibilty wise as a real legend
        </div>

        ...

    </div>
</fieldset>

ใช้ role = "group" และ aria-labelledby แทน fieldset และ legend

หากคุณต้องการ flex-container เพื่อให้สามารถยืดความสูงขององค์ประกอบพี่น้องและจากนั้นส่งผ่านไปยังลูกของคุณคุณจะต้องใช้role="group"แทน<fieldset>

https://codepen.io/daniel-tonon/pen/BayRjGz

<style>
.flex-container {
    display: flex;
}
</style>

<div role="group" class="flex-container" aria-labelledby="fake-legend">
    <div class="flex-child" id="fake-legend">
        I am as good accessibilty wise as a real legend
    </div>

    ...

</div>

การสร้างตำนานที่ซ้ำกันปลอมเพื่อการจัดแต่งทรงผม

นี่เป็นวิธีแฮ็กที่จะทำ ยังคงสามารถเข้าถึงได้ แต่คุณไม่ต้องจัดการกับ ID เมื่อทำเช่นนี้ ข้อเสียเปรียบหลักคือจะมีการทำซ้ำเนื้อหาระหว่างองค์ประกอบตำนานจริงและองค์ประกอบตำนานปลอม

https://codepen.io/daniel-tonon/pen/zLLqjY

<style>
.screen-reader-only {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.flex-container {
    display: flex;
}
</style>

<fieldset>
    <legend class="screen-reader-only">
        I am a real screen-reader accessible legend element
    </legend>

    <div class="flex-container">
        <div class="flex-child" aria-hidden="true">
            I am a fake legend purely for styling purposes
        </div>

        ...

    </div>
</fieldset>

ตำนานต้องเป็นสิ่งมีค่าโดยตรง

เมื่อคุณพยายามแก้ไขด้วยตนเองเป็นครั้งแรกคุณอาจลองทำสิ่งนี้:

<!-- DO NOT DO THIS! -->
<fieldset>
    <div class="flex-container">
        <legend class="flex-child">
            Broken semantics legend text
        </legend>

        ...

    </div>
</fieldset>

คุณจะค้นพบว่ามันใช้งานได้และจากนั้นคุณอาจจะดำเนินต่อไปโดยไม่ให้ความคิดที่สอง

ปัญหาคือการวาง wrapper div ระหว่าง fieldset และ legend ทำให้ความสัมพันธ์ระหว่างทั้งสององค์ประกอบแตกหัก สิ่งนี้จะแบ่งความหมายของ fieldset / legend

ดังนั้นในการทำเช่นนี้คุณได้เอาชนะวัตถุประสงค์ทั้งหมดของการใช้ fieldset / legend ในตอนแรก

นอกจากนี้ยังมีจุดไม่มากในการใช้ fieldset ถ้าคุณไม่ให้ fieldset ที่เป็นตำนาน

ในประสบการณ์ของฉันฉันพบว่าค่า<fieldset>หรือ<button>ไม่<textarea>สามารถใช้อย่างถูกต้องdisplay:flexหรือได้รับการถ่ายทอดคุณสมบัติ

ตามที่คนอื่น ๆ พูดถึงแล้วมีการรายงานข้อผิดพลาด หากคุณต้องการใช้ flexbox เพื่อควบคุมการสั่งซื้อ (เช่นorder:2) คุณจะต้องล้อมองค์ประกอบใน div หากคุณต้องการให้ flexbox ควบคุมรูปแบบและขนาดจริงคุณอาจต้องการใช้ div แทนการควบคุมอินพุต

<div role="group">
    <p>foo</p>
    <p>bar</p>
</div>
<div>
    <p>foo</p>
    <p>bar</p>
</div>

อาจต้องใช้กลุ่มบทบาทเพราะ firefox, chrome และฉันคิดว่าซาฟารีมีข้อผิดพลาดกับ fieldets จากนั้นตัวเลือกใน CSS ก็จะเป็น

div[role='group'], div {
    display: flex;
    border: 1px solid;
}

แก้ไข:นี่คือปัญหาบางอย่างที่คนอื่นกำลังประสบเช่นกัน

ปัญหา 375693

ปัญหา 262679

คุณสามารถใส่ div เพิ่มเติม<fieldset>ด้วยอุปกรณ์ประกอบฉากต่อไปนี้:

flex-inner-wrapper {
  display: inherit;
  flex-flow: inherit;
  justify-content: inherit;
  align-items: inherit;
}

หากต้องการตอบคำถามเดิม: ใช่มันเป็นข้อผิดพลาด แต่มันไม่ได้ถูกกำหนดอย่างชัดเจนในเวลาที่คำถามถูกถาม

ตอนนี้การสร้างเรนเดอร์สำหรับ fieldset จะถูกกำหนดไว้ดีกว่า: https://html.spec.whatwg.org/multipage/rendering.html#the-fieldset-and-legend-elements

ใน Firefox และ Safari flexboxเปิดใช้fieldsetงานแล้ว ยังไม่ได้อยู่ใน Chromium (ดูhttps://bugs.chromium.org/p/chromium/issues/detail?id=375693 )

ดูhttps://blog.whatwg.org/the-state-of-fieldset-interoperabilityสำหรับการปรับปรุงในสเปคในปี 2018