ปัญหา

ฉันมี<select>ที่หนึ่งใน<option>ค่าข้อความของมันยาวมาก ฉันต้องการ<select>ปรับขนาดเพื่อให้ไม่กว้างกว่าพาเรนต์แม้ว่าจะต้องตัดข้อความที่แสดงออก max-width: 100%ควรทำเช่นนั้น

ก่อนปรับขนาด:

สิ่งที่ฉันต้องการหลังจากปรับขนาด:

แต่ถ้าคุณโหลดตัวอย่าง jsFiddle นี้และปรับขนาดความกว้างของแผงผลลัพธ์ให้เล็กกว่าของ<select>คุณจะเห็นได้ว่าตัวเลือกภายในนั้น<fieldset>ล้มเหลวในการลดขนาดความกว้างลง

สิ่งที่ฉันเห็นจริงหลังจากปรับขนาด:

อย่างไรก็ตามหน้าเว็บที่เทียบเท่ากับ<div>แทนที่จะเป็น<fieldset>สเกลจะถูกต้อง คุณจะเห็นว่าและทดสอบการเปลี่ยนแปลงของคุณได้ง่ายขึ้นถ้าคุณมีและถัดจากแต่ละอื่น ๆ บนหน้าหนึ่ง และถ้าคุณลบแท็กโดยรอบการปรับขนาดจะทำงาน แท็กเป็นอย่างใดก่อให้เกิดการปรับขนาดแนวนอนเพื่อแบ่ง<fieldset><div><fieldset><fieldset>

ทำหน้าที่เป็นถ้ามีกฎ<fieldset> CSS fieldset { min-width: min-content; }( min-contentหมายถึงความกว้างที่เล็กที่สุดซึ่งไม่ทำให้เด็กล้น) หากฉันแทนที่<fieldset>ด้วย<div>ด้วยmin-width: min-contentจะมีลักษณะเหมือนกันทุกประการ แต่ไม่มีกฎmin-contentในสไตล์ของฉันในสไตล์ชีทเริ่มต้นของเบราว์เซอร์หรือปรากฏใน CSS Inspector ของ CSS ของ Firebug ผมพยายามที่จะแทนที่รูปแบบที่มองเห็นได้ในทุก<fieldset>ใน Firebug ของ CSS สารวัตรและในสไตล์ชีตเริ่มต้นของ Firefox forms.cssแต่นั่นก็ไม่ได้ช่วย การเอาชนะโดยเฉพาะmin-widthและwidthไม่ได้ทำอะไรเช่นกัน

รหัส

HTML ของ fieldset:

<fieldset>
    <div class="wrapper">
        <select id="section" name="section">
            <option value="-1"></option>
            <option value="1501" selected="selected">Sphinx of black quartz, judge my vow. The quick brown fox jumps over the lazy dog.</option>
            <option value="1480">Subcontractor</option>
            <option value="3181">Valley</option>
            <option value="3180">Ventura</option>
            <option value="3220">Very Newest Section</option>
            <option value="1481">Visitor</option>
            <option value="3200">N/A</option>
        </select>
    </div>
</fieldset>

CSS ของฉันที่ควรใช้งานได้ แต่ไม่ใช่:

fieldset {
    /* hide fieldset-specific visual features: */
    margin: 0;
    padding: 0;
    border: none;
}

select {
    max-width: 100%;
}

การรีเซ็ตwidthคุณสมบัติเป็นค่าเริ่มต้นไม่ได้ทำอะไรเลย:

fieldset {
    width: auto;
    min-width: 0;
    max-width: none;
}

CSS เพิ่มเติมที่ฉันพยายามและล้มเหลวในการแก้ไขปัญหา :

/* try lots of things to fix the width, with no success: */
fieldset {
    display: block;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    text-overflow: clip;
}

div.wrapper {
    width: 100%;
}

select {
    overflow: hidden;
}

รายละเอียดเพิ่มเติม

ปัญหายังเกิดขึ้นในตัวอย่าง jsFiddle ที่มีความครอบคลุมและซับซ้อนมากขึ้นซึ่งคล้ายกับหน้าเว็บที่ฉันพยายามแก้ไข คุณจะเห็นได้ว่าสิ่ง<select>นั้นไม่ใช่ปัญหา - อินไลน์บล็อคdivยังไม่สามารถปรับขนาดได้ แม้ว่าตัวอย่างนี้จะซับซ้อนกว่า แต่ฉันคิดว่าการแก้ไขกรณีง่าย ๆ ข้างต้นจะแก้ไขกรณีที่ซับซ้อนมากขึ้นด้วย

[แก้ไข: ดูรายละเอียดการสนับสนุนเบราว์เซอร์ด้านล่าง]

สิ่งหนึ่งที่อยากรู้เกี่ยวกับปัญหานี้คือถ้าคุณตั้งค่าdiv.wrapper { width: 50%; }การ<fieldset>หยุดการปรับขนาดตัวเอง ณ จุดนั้นขนาดเต็ม<select>จะกระทบกับขอบของวิวพอร์ต ปรับขนาดเกิดขึ้นถ้า<select>มีwidth: 100%แม้ดูเหมือนว่ามันมี<select>width: 50%

หากคุณให้<select>ตัวเองwidth: 50%พฤติกรรมนั้นจะไม่เกิดขึ้น ตั้งค่าความกว้างได้อย่างถูกต้อง

ฉันไม่เข้าใจเหตุผลของความแตกต่างนั้น แต่มันอาจไม่เกี่ยวข้อง

ฉันยังพบคำถามที่คล้ายกันมากHTML fieldset ช่วยให้เด็กที่จะขยายไปเรื่อย ๆ ถามไม่สามารถหาวิธีการแก้ปัญหาและการคาดเดาว่าจะมีวิธีการแก้ปัญหาไม่<fieldset>แตกต่างจากการเอา แต่ฉันสงสัยว่าถ้ามันเป็นไปไม่ได้ที่จะทำให้การ<fieldset>แสดงผลถูกต้องทำไมเป็นเช่นนั้น? อะไร<fieldset>'s ข้อมูลจำเพาะหรือเริ่มต้น CSS ( ณ คำถามนี้ ) ทำให้เกิดพฤติกรรมนี้หรือไม่? พฤติกรรมพิเศษนี้อาจถูกบันทึกไว้ที่ใดที่หนึ่งเนื่องจากเบราว์เซอร์หลายตัวทำงานเช่นนี้

เป้าหมายพื้นหลังและข้อกำหนด

เหตุผลที่ฉันพยายามทำเช่นนี้เป็นส่วนหนึ่งของการเขียนสไตล์มือถือสำหรับหน้าเว็บที่มีอยู่ด้วยฟอร์มขนาดใหญ่ แบบฟอร์มมีหลายส่วนและส่วนหนึ่งถูกห่อ<fieldset>ด้วย บนสมาร์ทโฟน (หรือถ้าคุณทำให้หน้าต่างเบราว์เซอร์เล็ก) ส่วนของหน้าเว็บที่<fieldset>มีความกว้างกว่าส่วนที่เหลือของแบบฟอร์ม แบบฟอร์มส่วนใหญ่จำกัดความกว้างของมันได้ดี แต่ส่วนที่<fieldset>ไม่มีจะบังคับให้ผู้ใช้ย่อหรือเลื่อนไปทางขวาเพื่อดูส่วนนั้นทั้งหมด

ฉันแค่ระมัดระวังในการลบ<fieldset>เพราะมันถูกสร้างขึ้นในหลาย ๆ หน้าในแอพขนาดใหญ่และฉันไม่แน่ใจว่าตัวเลือกใดใน CSS หรือ JavaScript อาจขึ้นอยู่กับมัน

ฉันสามารถใช้ JavaScript ได้ถ้าต้องการและโซลูชัน JavaScript นั้นดีกว่าไม่มีอะไรเลย แต่ถ้าจาวาสคริปต์เป็นวิธีเดียวที่จะทำสิ่งนี้ฉันอยากรู้อยากเห็นคำอธิบายว่าทำไมจึงไม่สามารถทำได้ด้วย CSS และ HTML เท่านั้น

แก้ไข: รองรับเบราว์เซอร์

บนเว็บไซต์ฉันต้องรองรับ Internet Explorer 8 และใหม่กว่า (เราเพิ่งลดการสนับสนุน IE7) Firefox ล่าสุดและ Chrome ล่าสุด หน้านี้ควรทำงานบนสมาร์ทโฟน iOS และ Android พฤติกรรมที่เสื่อมโทรมเล็กน้อย แต่ยังคงใช้งานได้เป็นที่ยอมรับได้สำหรับ Internet Explorer 8

ผมครั้งแล้วครั้งเล่าเสียของฉันfieldsetเช่นบนเบราว์เซอร์ที่แตกต่างกัน ใช้งานได้จริงแล้วในเบราว์เซอร์เหล่านี้:

• Internet Explorer 8, 9 และ 10
• โครเมียม
• Chrome สำหรับ Android

มันหยุดในเบราว์เซอร์เหล่านี้:

• Firefox
• Firefox สำหรับ Android
• Internet Explorer 7

ดังนั้นเบราว์เซอร์เดียวที่ฉันใส่ใจเกี่ยวกับการแบ่งรหัสปัจจุบันคือ Firefox (ทั้งบนเดสก์ท็อปและมือถือ) หากรหัสได้รับการแก้ไขเพื่อให้ทำงานใน Firefox โดยไม่ทำลายในเบราว์เซอร์อื่น ๆ นั่นจะช่วยแก้ปัญหาของฉันได้

เทมเพลต HTML ของไซต์ใช้ความคิดเห็นตามเงื่อนไขของ Internet Explorer เพื่อเพิ่มคลาสดังกล่าว.ie8และ.oldieให้กับ<html>องค์ประกอบ คุณสามารถใช้คลาสเหล่านั้นใน CSS ของคุณหากคุณต้องการแก้ไขสไตล์ที่แตกต่างใน IE เรียนเพิ่มเป็นเช่นเดียวกับในรุ่นเก่าของ HTML5 Boilerplate

อัปเดต (25 กันยายน 2560)

ข้อผิดพลาด Firefoxอธิบายไว้ด้านล่างได้รับการแก้ไขเป็นของ Firefox 53 และเชื่อมโยงไปยังคำตอบนี้ได้รับในที่สุดก็ถูกลบออกจากเอกสารของเงินทุน

นอกจากนี้ฉันขอโทษอย่างจริงใจต่อผู้สนับสนุน Mozilla ที่ต้องบล็อกการลบการสนับสนุน-moz-documentส่วนหนึ่งเนื่องจากคำตอบนี้

การแก้ไข

ใน WebKit และ Firefox 53+ คุณเพิ่งตั้งค่าmin-width: 0;บน fieldset เพื่อแทนที่ค่าเริ่มต้นของ. min-content¹

ถึงกระนั้น Firefox ก็ค่อนข้างแปลกเมื่อมันมาถึงทุ่งนา ในการทำให้งานนี้เป็นรุ่นก่อนหน้าคุณต้องเปลี่ยนdisplayคุณสมบัติของ fieldset เป็นหนึ่งในค่าต่อไปนี้:

• table-cell (แนะนำ)
• table-column
• table-column-group
• table-footer-group
• table-header-group
• table-row
• table-row-group

table-cellของเหล่านี้ผมขอแนะนำให้ ทั้งสองtable-rowและtable-row-groupป้องกันไม่ให้คุณเปลี่ยนความกว้างในขณะที่table-columnและtable-column-groupป้องกันไม่ให้คุณเปลี่ยนความสูง

การทำเช่นนี้จะทำให้การเรนเดอร์หยุดชะงักใน IE เนื่องจาก Gecko ต้องการเพียงสิ่งนี้เท่านั้นคุณจึงสามารถใช้@-moz-document- หนึ่งในส่วนขยาย CSS ที่เป็นกรรมสิทธิ์ของ Mozilla - เพื่อซ่อนไว้จากเบราว์เซอร์อื่น:

@-moz-document url-prefix() {
    fieldset {
        display: table-cell;
    }
}

(นี่คือตัวอย่างjsFiddle )

นั่นแก้ไขสิ่งต่าง ๆ แต่ถ้าคุณชอบอะไรฉันปฏิกิริยาของคุณก็เหมือนกับ ...

อะไร.

มีเป็นเหตุผล แต่มันไม่สวย

การนำเสนอเริ่มต้นขององค์ประกอบ fieldset เป็นเรื่องเหลวไหลและเป็นไปไม่ได้ที่จะระบุใน CSS คิดเกี่ยวกับมัน: เส้นขอบของ fieldset หายไปโดยที่มันซ้อนทับกันด้วยองค์ประกอบตำนาน แต่พื้นหลังยังคงมองเห็นได้! ไม่มีวิธีการทำซ้ำสิ่งนี้ด้วยองค์ประกอบอื่น ๆ

ยิ่งไปกว่านั้นการนำไปใช้งานนั้นเต็มไปด้วยข้อเรียกร้องจากพฤติกรรมดั้งเดิม หนึ่งในนั้นก็คือความกว้างต่ำสุดของ fieldset ไม่น้อยกว่าความกว้างที่แท้จริงของเนื้อหา WebKit ให้วิธีการแทนที่พฤติกรรมนี้โดยระบุในสไตล์ชีทเริ่มต้น แต่Gecko²ก้าวไปอีกขั้นและบังคับใช้ในเอ็นจิ้นการเรนเดอร์

อย่างไรก็ตามองค์ประกอบตารางภายในประกอบด้วยชนิดเฟรมพิเศษใน Gecko ข้อ จำกัด ด้านมิติสำหรับองค์ประกอบที่มีdisplayชุดค่าเหล่านี้จะถูกคำนวณในพา ธ โค้ดแยกต่างหากโดยสิ้นเชิงเพื่อหลีกเลี่ยงความกว้างขั้นต่ำที่บังคับใช้ซึ่งกำหนดไว้ในชุดฟิลด์

อีกครั้ง - ข้อผิดพลาดสำหรับสิ่งนี้ได้รับการแก้ไขตั้งแต่ Firefox 53 ดังนั้นคุณไม่จำเป็นต้องแฮ็คนี้หากคุณกำหนดเป้าหมายเฉพาะรุ่นที่ใหม่กว่าเท่านั้น

ใช้งาน@-moz-documentอย่างปลอดภัยหรือไม่

สำหรับปัญหานี้ใช่ @-moz-documentทำงานได้ตามที่คาดหวังใน Firefox ทุกรุ่นจนถึง 53 ซึ่งข้อผิดพลาดนี้ได้รับการแก้ไข

นี่ไม่ใช่อุบัติเหตุ เนื่องจากส่วนหนึ่งของคำตอบนี้ข้อผิดพลาดที่จะจำกัด@-moz-documentผู้ใช้ / สไตล์ชีต UAนั้นขึ้นอยู่กับข้อผิดพลาด fieldset พื้นฐานที่ได้รับการแก้ไขก่อน

นอกเหนือจากนี้อย่าใช้@-moz-documentเพื่อกำหนดเป้าหมาย Firefox ใน CSS ของคุณทรัพยากรอื่น ๆ แม้จะมีอย่างไรก็ตาม

¹ค่าอาจนำหน้า อ้างอิงจากผู้อ่านคนหนึ่งนี่ไม่มีผลใน Android 4.1.2 Stock Browser และอาจเป็นเวอร์ชั่นเก่าอื่น ๆ ฉันไม่มีเวลาที่จะตรวจสอบเรื่องนี้

²ลิงก์ทั้งหมดไปยังแหล่งที่มาของ Gecko ในคำตอบนี้อ้างถึงชุดการเปลี่ยนแปลง 5065fdc12408มุ่งมั่นที่29ᵗʰกรกฎาคม 2013; คุณอาจต้องการที่จะเปรียบเทียบบันทึกที่มีการแก้ไขล่าสุดจาก Mozilla กลาง

³ดูเช่นSO # 953491: การกำหนดเป้าหมายเฉพาะ Firefox ด้วย CSSและเคล็ดลับ CSS: CSS แฮ็กกำหนดเป้าหมาย Firefoxสำหรับบทความที่อ้างอิงอย่างกว้างขวางในเว็บไซต์ที่มีรายละเอียดสูง

Safari ในปัญหา iOS พร้อมคำตอบที่เลือก

ฉันพบคำตอบจาก Jordan Gray ว่าเป็นประโยชน์อย่างยิ่ง อย่างไรก็ตามดูเหมือนว่าจะไม่สามารถแก้ปัญหานี้ใน Safari iOS ได้สำหรับฉัน

ปัญหาสำหรับฉันก็คือชุดข้อมูลไม่สามารถมีความกว้างอัตโนมัติได้หากองค์ประกอบภายในมีความกว้างสูงสุดเป็นความกว้าง%

แก้ไขปัญหา

เพียงแค่ตั้งค่า fieldset ให้มีความกว้าง 100% ของคอนเทนเนอร์มันจะแก้ไขปัญหานี้ได้

ตัวอย่าง

fieldset {
    min-width: 0; 
    width: 100%; 
}

โปรดดูตัวอย่างการทำงานด้านล่าง - หากคุณลบ% width ออกจาก fieldset หรือแทนที่ด้วย auto มันจะไม่ทำงานต่อไป

JSFiddle | Codepen

ฉันพยายามมาหลายชั่วโมงแล้วโดยทั่วไปเบราว์เซอร์ใช้สไตล์การคำนวณที่คุณต้องการแทนที่ใน CSS ของคุณ ฉันลืมคุณสมบัติที่แน่นอนที่ตั้งอยู่บนfieldsetองค์ประกอบเมื่อเทียบกับdivs (อาจmin-width?)

คำแนะนำที่ดีที่สุดของฉันคือการเปลี่ยนองค์ประกอบของคุณไปที่ a divคัดลอกสไตล์ที่คำนวณจากผู้ตรวจสอบของคุณจากนั้นเปลี่ยนองค์ประกอบของคุณกลับไปที่fieldsetและเปรียบเทียบสไตล์ที่คำนวณเพื่อค้นหาผู้กระทำผิด

หวังว่าจะช่วย

อัปเดต: การเพิ่มความdisplay: table-cellช่วยเหลือในเบราว์เซอร์ที่ไม่ใช่ Chrome

.fake-select { white-space:nowrap; }ทำให้ fieldset ตีความ.fake-selectองค์ประกอบตามความกว้างดั้งเดิมของมันแทนที่จะบังคับใช้ความกว้าง (แม้ว่าจะถูกซ่อนไว้มากเกินไป)

ลบกฎนั้นออกและเปลี่ยน.fake-selectเป็นmax-width:100%เพียงwidth:100%และทุกอย่างเหมาะสม ข้อแม้คือการที่คุณเห็นเนื้อหาทั้งหมดของตัวเลือกปลอม แต่ฉันไม่คิดว่านี่เป็นสิ่งที่เลวร้ายและมันเข้ากันในแนวนอนแล้ว

อัปเดต:ด้วยกฎปัจจุบันในซอต่อไปนี้ (ซึ่งมีการเลือกจริงเท่านั้น) ลูกของชุดข้อมูลจะถูก จำกัด ด้วยความกว้างที่ถูกต้อง นอกเหนือจากการลบกฎ.fake-selectและแก้ไขความคิดเห็น (จาก// commentเป็น/* comment */ฉันได้บันทึกการเปลี่ยนแปลงใน CSS ของซอ

ตอนนี้ฉันเข้าใจปัญหาของคุณดีขึ้นแล้ว ฉันตั้งกฎเริ่มต้นสำหรับทุก<select>s และสำรอง.xxlargeสำหรับสิ่งที่คุณรู้ว่าจะกว้างกว่า 480px (และนี่ใช้งานได้เพียงเพราะคุณทราบความกว้างของ#viewportและสามารถเพิ่มชั้นเรียนให้กว้างเกินไปด้วยตนเองเพียงแค่ต้องการการทดสอบเล็กน้อย )

พิสูจน์