2009-02-09 14 views
6

के लिए फॉर्म में अत्यधिक मार्जिन मैं अपने आवेदन में आईई 7 बग से निपटने की कोशिश कर रहा हूं। यहाँ HTML/CSS कोडआईई 7: टेक्स्टरेरा

<div style="margin-left: 320px"> 
    <form method="post" action=""><fieldset> 
     <textarea name="prj_comment" id="prj_comment" rows="5" cols="50" 
        style="margin: 0; padding: 0"></textarea> 
    </fieldset></form> 
</div> 

फ़ायरफ़ॉक्स/ओपेरा/वेबकिट/IE6 में यह ठीक है, लेकिन IE7 में पाठ क्षेत्र एक 100px मार्जिन छोड़ दिया है। अगर किसी को इसे सही करने के लिए कोई सुझाव है, तो बहुत बहुत धन्यवाद!

http://daneel.net/pub/img/ie7_bug_decalage.jpg

+0

आप किस सिद्धांत का उपयोग करते हैं? – mbillard

उत्तर

4

पूरी तरह से अजीब:

यहाँ IE7 का एक स्क्रीनशॉट इस नमूना HTML दिखाती रहती है। मैं वास्तव में i7 में 320px (= पैरेंट div मार्जिन) प्राप्त करता हूं।

आप केवल नकारात्मक मार्जिन एक IE7 के साथ अधिलेखित कर सकते हैं, लेकिन यह भयानक है ...

संपादित करें: ठीक है, मुझे पता नहीं क्यों यह काम करता है, लेकिन यह काम करता है। इस defintely एक बग है:

<div style="margin-left: 320px; display:inline-block;"> 
    <form method="post" action=""><fieldset> 
     <textarea name="prj_comment" id="prj_comment" rows="5" cols="50" 
        style="margin: 0; padding: 0"></textarea> 
    </fieldset></form> 
</div> 
+0

आप ** डिस्प्ले पर कुछ जोर देना चाहते हैं: इनलाइन-ब्लॉक; ** – mbillard

3

< fieldset के लिए IE के डिफ़ॉल्ट स्टाइल के साथ एक बग होने के लिए लगता है>। मेरा अनुमान है कि आंतरिक रूप से, आईई float कोड का उपयोग करके स्टाइलिंग फ़ील्ड है और कुख्यात Double-margin bug को ट्रिगर कर रहा है।

मैं केवल < फ़ील्ड> के अंदर एक रैपर < div> डालकर बग को हराने में कामयाब रहा।

7

यह विरासत मार्जिन बग जैसा दिखता है (जैसा कि फ्लोट के साथ डबल-मार्जिन बग से अलग है)। Textarea रूप के चारों ओर div से मार्जिन विरासत में है। Position Is Everything describes it in more detail

व्यावहारिक कामकाज से जुड़े हैं:

  • पाठ क्षेत्र -320px की नकारात्मक बाईं मार्जिन दें (आईई के लिए ही, जाहिर है)।
  • टेक्स्टरेरा से पहले एक इनलाइन तत्व डालें, लेकिन फ़ील्डसेट के अंदर। ऐसा लगता है कि आप शैली को प्रदर्शित करने के लिए सेट कर सकते हैं: कोई नहीं, लेकिन तत्व खाली नहीं हो सकता है।
  • एक div/span/any-other-tag में textarea को तब तक लपेटें जब तक कि इसमें कोई स्टाइल नियम न हो जो इसे लेआउट देता है (मैं वास्तव में सोचता था कि फॉर्म या फ़ील्ड इसे ठीक करेगा, लेकिन जाहिर है कि वे डॉन करते हैं 'टी)।
3

एक और, (यह भी भयंकर) समाधान सिर्फ <textarea> के सामने &nbsp; जोड़ने के लिए ... होगा, लेकिन IMHO, मैं drity समाधान ... आग अगर साथ आग के साथ गंदा आईई कीड़े लड़ के साथ ठीक हूँ आप करेंगे ...;)

+0

मैंने इसे थोड़ा विस्तारित किया:   , यह एक साधारण फिक्स था और केवल एक्सपी पर फंसे गरीब आत्माओं पर जगह दिखाता है। – Jake1164