2009-11-04 15 views
11

मैं फ़ील्डसेट में ओवरफ़्लो के लिए सामग्री कैसे सेट कर सकता हूं? यह आईई में काम करता है लेकिन एफएफ में नहीं।फ़ील्ड फ़ायरफ़ॉक्स ओवरफ़्लो सीएसएस फिक्स

समान कार्यक्षमता मैं दोनों ब्राउज़रों में div तत्व के साथ प्राप्त कर सकता हूं।

नमूना:

<fieldset style="border:thin solid #990033;"> 
    <legend>test</legend> 
    <div style="background-color:#0033FF; height: 30px; width:800px;" >FIXED DIV</div> 
</fieldset> 
<p>&nbsp;</p> 
<div style="border:1px solid #999999; padding:0 8px 8px 8px;"> 
    <label style="background-color:#FFFFFF; padding:0 5px; position:relative; top:-10px;" >test</label> 
    <div style="background-color:#0033FF; height: 30px; width:800px;" >FIXED DIV</div> 
</div> 
+0

मैं एक HTML दस्तावेज़ में इस चिपकाया और दोनों बॉक्स Firefox (3.5) में समान लग रहे हो। इंटरनेट एक्सप्लोरर में उनके पास अलग-अलग आंतरिक पैडिंग होते हैं। सीएसएस के लिए एक आसान चाल किसी भी पैडिंग के साथ सब कुछ शुरू करना है और कोई मार्जिन नहीं है: * {पैडिंग: 0; मार्जिन: 0} और केवल अपनी जरूरतों को लागू करें, प्रत्येक ब्राउज़र तत्वों पर अलग-अलग डिफ़ॉल्ट पैडिंग और मार्जिन डालता है। – MalphasWats

उत्तर

19

मिले समाधान, जोड़ने सशर्त सीएसएस शैली:

fieldset { 
    display: table-column; 
} 
<!–[if IE]> 
fieldset { 
    display: block; 
} 
<![endif]–> 
+0

बिल्कुल सही! धन्यवाद! ध्यान दें कि आप फ़ील्ड को फ़्लोट नहीं कर सकते हैं। मैंने ओपेरा समर्थन के साथ एक शोकेस फीड बनाया: http://jsfiddle.net/dsHUW/5/ – falsarella

+1

धन्यवाद! बस पुष्टि की: यह बग अभी भी एफएफ 20.0.1 में मौजूद है और सफारी 5.1.2 में भी मौजूद है। क्रोम और आईई 7-10 में ठीक काम करता है। 'डिस्प्ले: टेबल-कॉलम; 'इसे फ़ायरफ़ॉक्स के लिए तय किया गया, लेकिन सफारी नहीं। आईई फ़ील्ड को बिल्कुल प्रस्तुत नहीं करेगा (इसके बजाय 'डिस्प्ले: ब्लॉक', डिफ़ॉल्ट, का उपयोग करना चाहिए)। क्रोम परवाह नहीं है कि यह 'ब्लॉक' या 'टेबल-कॉलम' है, ठीक है या तो ठीक है। [बेवकूफ देखें] (http://jsfiddle.net/VVjnr/) (विंडोज 7 एसपी 1 में किए गए सभी परीक्षण) – nothingisnecessary

+0

'डिस्प्ले: टेबल-कॉलम; 'क्रोम 36 –

-1

आप सामग्री अतिप्रवाह की जरूरत नहीं है! आईई (6) में, डिफ़ॉल्ट रूप से, "फ़ील्डसेट" टैग में कोई पैडिंग नहीं है, इसमें एफएफ में है! यही कारण है कि आपके पास एक अलग व्यवहार है!

आप फ़ील्ड के पैडिंग (पैडिंग: 0 पीएक्स;) को रीसेट कर सकते हैं लेकिन इस मामले में, एफएफ में, लेबल ठीक दिखता नहीं है! इसे ठीक करने के लिए, आप फ़ील्ड के पैडिंग-तल को रीसेट कर सकते हैं और फ़ील्ड के अंदर div में "margin-left: -12px" लागू कर सकते हैं। हालांकि, यह एफएफ के साथ समस्या हल करता है लेकिन आईई में एक मुद्दा उत्पन्न करता है!

तो, मेरा सुझाव है कि प्रत्येक ब्राउज़र पर शैली के सही नियमों पर लागू करने के लिए सशर्त सीएसएस कथन का उपयोग करें!

+0

मैंने कोशिश की लेकिन सफलता नहीं मिली। – jmav

17

यह वास्तव में फ़ायरफ़ॉक्स में एक बग है और यह लगभग 8 साल के लिए मौजूद है। : डी https://bugzilla.mozilla.org/show_bug.cgi?id=261037

+0

में समस्या को ठीक नहीं करता है यह बग अभी भी मौजूद है फ़ायरफ़ॉक्स 32, और क्रोम 36. –

+0

क्या यह एक बग है? जो भी हो, यह अभी भी एफएफ v54.0.1 में मौजूद है - बस फिक्स 'फ़ील्डसेट {डिस्प्ले: टेबल-कॉलम;} 'का उपयोग करें और यह पूरी तरह से काम करता है! – B4NZ41

+0

@ बी 4 एनजे 41 एफएफ 52.5.3 ईएसआर 'फ़ील्ड {डिस्प्ले: टेबल-कॉलम;}' ओवरफ्लो + चौड़ाई की समस्याओं को हल नहीं करता है और निश्चित/पूर्ण स्थानित तत्व के लिए काम नहीं कर सकता (स्वचालित रूप से डिस्प्ले में परिवर्तित: ब्लॉक लेकिन डिस्प्ले जैसा दिखता है: तालिका)। मैंने कोशिश की लेकिन काम नहीं करता। खराब समाचार: क्रोम ने फ़ायरफ़ॉक्स में काम करने के लिए फ़ील्डसेट को "बेहतर" किया है। यह दुख की बात है। – 18C

3

एक ब्लॉग post से एमिल Björklund द्वारा:

body:not(:-moz-handler-blocked) fieldset { 
    display: table-cell; 
} 
+2

1000X हां, इसके लिए धन्यवाद। इसे उत्तर स्वीकार किया जाना चाहिए, दूसरा कोई खाता नहीं छोड़कर अन्य कोई ब्राउज़र नहीं लेता है। – Bryan

+0

फ़ायरफ़ॉक्स और क्रोम में मेरे लिए काम नहीं करता है। – 18C

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