2012-02-09 13 views
9

मैं फ़ील्डसेट के साथ display: table का उपयोग करने का प्रयास कर रहा हूं, लेकिन यह ठीक से स्केल नहीं कर रहा है। अगर मैं <fieldset> से <div> बदलता हूं तो वही काम काम करता है।फ़ील्डसेट प्रदर्शन का समर्थन नहीं करता है: तालिका/टेबल-सेल

मैंने सफारी और फ़ायरफ़ॉक्स के साथ प्रयास किया।

मैं कुछ याद आ रही है?

http://jsfiddle.net/r99H2/

+0

मेरे लिए पूरी तरह से ठीक काम करने लगता है, लेकिन आपके पास फ़ील्डसेट के अंदर 'डिस्प्ले: टेबल-पंक्ति' वाला तत्व होना चाहिए और कोशिकाओं को रखना चाहिए। –

+0

यह आईई 8/आईई 9, ओपेरा में काम करता है। यह क्रोम कैनरी या फ़ायरफ़ॉक्स में रात में भी काम नहीं करता है। – thirtydot

उत्तर

14

असल में, fieldset के डिफ़ॉल्ट प्रतिपादन वास्तव में सीएसएस में व्यक्त नहीं किया जा सकता है। नतीजतन, ब्राउज़र को इसे गैर-सीएसएस शर्तों में लागू करना होता है, और यह तत्व के लिए सीएसएस के अनुप्रयोग में हस्तक्षेप करता है।

शुद्ध सीएसएस का उपयोग करके पुनर्निर्मित नहीं किए जा सकने वाले किसी भी तत्व को उस तरह के मुद्दे होंगे।

+1

+1 अब यह मुझे समझ में आता है: http://stackoverflow.com/questions/6481944/why-do-fieldsets-clear-floats – BoltClock

4

fieldset विशेष व्यवहार के साथ एक तत्व है, तो यह यह समस्या तब उत्पन्न करने के लिए की संभावना है।

अपने फ़ील्ड रैपर के अंदर एक और div wrapper जोड़ें, और div का उपयोग करें। फ़ील्ड को सामान्य पर वापस बदलें, या ब्लॉक करें।

<fieldset style="background: pink; width: 100%"> 
    <div style="display: table; width: 100%"> 
     <div style="display: table-cell; background: red; width: 33%">a</div> 
     <div style="display: table-cell; background: green; width: 33%">b</div> 
     <div style="display: table-cell; background: blue; width: 33%">c</div> 
    </div> 
</fieldset> 
+1

यह काम करता है, लेकिन क्या वहां संसाधन संसाधन है जिसमें तत्वों का विशेष व्यवहार है? – romaninsh

+0

आपको इसे संबंधित HTML चश्मे में ढूंढना होगा, लेकिन मुझे यकीन नहीं है कि आसपास एक त्वरित संदर्भ सूची है या नहीं। – BoltClock

संबंधित मुद्दे