सीएसएस: आईई

Question

में इनपुट की चौड़ाई और पैडिंग के साथ समस्या मुझे आईई में इनपुट [टेक्स्ट] फ़ील्ड पर चौड़ाई के साथ समस्या है, सभी संस्करण।

मेरे पास 250px की स्पष्ट रूप से सेट चौड़ाई वाला एक div है। इस div में, मेरे पास इनपुट इनपुट फ़ील्ड है जिसमें चौड़ाई सेट 100% है। इस इनपुट में 10px की आंतरिक बाएं-पैडिंग भी है।

आईई में, यह चौड़ाई 100% + 10px के रूप में प्रस्तुत करता है। मैं कंटेनर की चौड़ाई को बाधित करने के लिए एक तकनीक नहीं समझ सकता।

यह समस्या प्रारंभ में सभी ब्राउज़रों में हुई थी, लेकिन अधिकतम चौड़ाई जोड़कर एफएफ, सफारी और क्रोम में ठीक करना बहुत आसान था: 100%। आईई 6/7 इसका समर्थन नहीं करते हैं, जबकि आईई 8 करता है लेकिन यह अभी भी चौड़ाई में पैडिंग जोड़ता है।

मैं समझता हूं कि आईई के बॉक्स मॉडल में इसकी चौड़ाई की गणना में सीमा और मार्जिन शामिल है, इसलिए इसे समझने के बाद भी मैं इसके आसपास एक रास्ता नहीं ढूंढ सकता।

मैं अपनी इनपुट चौड़ाई को पैडिंग के साथ 240px पर सेट करने से बेहतर समाधान खोजने की भी कोशिश कर रहा हूं, क्योंकि इस फ़ॉर्म में विभिन्न इनपुट हैं जो कंटेनर आकार में भिन्न होते हैं और मैं एक सार्वभौमिक समाधान ढूंढना चाहता हूं।

<div class="places_edit_left"> 
    <h4>PHONE <strong>(NOT USER EDITABLE)</strong></h4> 
    <input type="text" value="" name="phoneNumber"/> 

    <h4>ADDRESS<strong>(NOT USER EDITABLE)</strong></h4> 
    <input type="text" value="" name="address"/> 
</div> 

सीएसएस

.places_edit_left{ width:250px; } 
.places_edit_left input{ width:100%; max-width:100%; padding-left:10px;} 

Answer 1

1. गलत बॉक्स मॉडल quirks मोड में आईई पर लागू होता है:

   यहाँ कुछ कोड है। इसलिए, आपको सख्त मोड को ट्रिगर करने की आवश्यकता हो सकती है। उदाहरण देखें http://www.quirksmode.org/css/quirksmode.html

2. आप इनपुट को कंटेनर के रूप में चौड़ा बनाना चाहते हैं? चौड़ाई को स्पष्ट रूप से सेट करें (पैडिंग के लिए 250 पीएक्स - 10 पीएक्स - सीमाओं के लिए एक्सएक्सपीएक्स)। आप चाहते हैं कि इनपुट div से व्यापक न हो? छिपाने के लिए div के लिए अतिप्रवाह सेट करें।

Answer 2

अधिकतम चौड़ाई वाली समस्या की गणना नहीं करते, आईई यहां सही काम कर रहा है। सीएसएस बॉक्स मॉडल का कहना है कि एक तत्व का समग्र आकार चौड़ाई प्लस है जो इसकी पैडिंग है, इसके मार्जिन प्लस करें।

बॉक्स मॉडल यह भी कहता है कि किसी भी गैर-फ़्लोटिंग ब्लॉक स्तर तत्व के लिए, तत्व का पूरा आकार (सब कुछ समेत) हमेशा तत्व का 100% होता है। आप अपने इनपुट बॉक्स की चौड़ाई को "ऑटो" होने के लिए और फिर अपने पैडिंग, सीमा और मार्जिन को स्पष्ट रूप से सेट करके अपने लाभ के लिए इसका उपयोग कर सकते हैं।

यह एक छोटा सा उदाहरण है (मैं जानता हूँ कि इस मार्कअप का एक बहुत है, लेकिन इस बिंदु को वर्णन overkill का एक सा है),

.places_edit_left{ 
    width:250px; 
    overflow:auto; 
} 

.places_edit_left input { 
    padding-right:0px; 
    padding-left:10px; 
    margin: 0 0 0 0; 
    border:1px solid black; 
    width:auto; 
    display:block; 
    float:none; 
} 

Answer 3

चेक करें: http://vitaly.harisov.name/example/broken-input-width-computation-in-msie.html मैं दूसरा समाधान का पालन किया है ।

Answer 4

बेस्ट समाधान: Real solution

.content { 
    width: 100%; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing:   border-box; 
} 

यह एक और निश्चित रूप से अन्य सभी आधुनिक ब्राउज़रों

बदसूरत समाधान है, लेकिन काम भी पुराने IE में के लिए IE8 + काम करेगा: Here