2010-05-22 11 views
6

निम्न उदाहरण पर विचार करें:सीएसएस: फ़ॉर्म नियंत्रण की चौड़ाई कैसे सेट करें ताकि सभी की एक ही चौड़ाई हो?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
     <style type="text/css"> 
      div { width: 15em } 
      input, textarea, select { width: 100%; 
       -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box } 
     </style> 
    </head> 
    <body> 
     <form> 
      <div> 
       <input value="Input"> 
      </div> 
      <div> 
       <textarea>Text area</textarea> 
      </div> 
      <div> 
       <select> 
        <option>One</option> 
        <option>Two</option> 
        <option>Three</option> 
       </select> 
      </div> 
     </form> 
    </body> 
</html> 

ब्राउज़र पर कि border-box बॉक्स आकार का समर्थन है, यह प्रदान की गई है के रूप में मैं चाहता हूँ:

Correct rendering http://img.skitch.com/20100522-c75mhdut2q32yc7u5r2tkft1n4.png

आईई 6/7, हालांकि, यह प्रदान की गई है के रूप में:

IE 6/7 rendering http://img.skitch.com/20100522-f5pkgnwwceaak3t8fqq2w16gfm.png

मैं कैसे प्राप्त कर सकते हैं IE 6/7 में वही प्रतिपादन जो कि मैं अन्य ब्राउज़रों में मिलता हूं, बिना पिक्सल में आकार सेट करने का उपयोग किए?

+0

अगर मैं इस सवाल को http://doctype.com/ पर क्रॉस-पोस्ट करने का सुझाव देता हूं तो मन? –

उत्तर

1

सीएसएस के साथ यह संभव नहीं है। मैंने कुछ शोध किया और मुझे पता चला कि here से पहले एक ही सवाल पूछा गया था।

<!--[if lt IE 8]><style>input, textarea { behavior: url("boxsizing.htc"); }</style><![endif]--> 
0

शायद यह आपकी मदद कर सकता है: CSS3 support for Internet Explorer 6, 7, and 8। पृष्ठ से:

IE-CSS3 आगामी CSS3 के मानक में उपलब्ध लोकप्रिय नई शैली के कई के लिए इंटरनेट एक्सप्लोरर का समर्थन प्रदान करने के लिए एक स्क्रिप्ट है।

+0

दुर्भाग्यवश, इस 'एचटीसी' में' बॉक्स-आकार 'के लिए समर्थन शामिल नहीं है। – BalusC

1

आईई 6/7 ब्राउज़र के लिए एक त्वरित फिक्स हो सकता है- इसे select { *width:102.5%; _width:102.5%; } जैसे कुछ के साथ हैक करें हालांकि यह बहुत व्यापक होने पर पिक्सेल तक नहीं हो सकता है।

+0

इसके साथ समस्या यह है कि यह आपको किसी दिए गए फ़ॉन्ट आकार पर लॉक करता है। मान लें कि मैं एक 'चयन {* चौड़ाई: 102.5%} 'जोड़ता हूं। बिल्कुल सही, अब फॉर्म फ़ील्ड की एक ही चौड़ाई है: http://img.skitch.com/20100522-ght27dws54jqp8r79bf5nf1hus.png। लेकिन अब एक 'बॉडी {फ़ॉन्ट आकार: 200%}' जोड़ें। उसी 'चयन {* चौड़ाई: 102.5%} 'के साथ, आपको मिलता है: http://img.skitch.com/20100522-ksie3bm45e83g314869fdhby29.png। तो आप जिस प्रतिशत को 'चयन {* चौड़ाई: 102.5%}' में डालते हैं, वह फ़ॉन्ट आकार पर निर्भर करेगा। जैसे-जैसे आपका फ़ॉन्ट आकार बदलता है, आपको उस प्रतिशत को बदलने की आवश्यकता होगी। इसके बजाय, मैं पिक्सेल में चौड़ाई के साथ जाना पसंद करूंगा। – avernet

2

समाधान CSS और JavaScript का उपयोग करने के रूप को नियंत्रित करता है कि ब्राउज़र विक्रेताओं शैली के लिए एक दर्द बनाने के लिए साजिश की है को बदलने के लिए है: समाधान इस boxsizing.htc फ़ाइल का उपयोग करें और अपने HTML सिर में निम्न पंक्ति जोड़ना है। एक चयन एक ऑन-हाउसअप ईवेंट के साथ बस एक ड्रॉप डाउन मेनू है। जेएस-संचालित टेक्स्ट एडिटर्स (समृद्ध और सरल) जो एक टेक्स्टरेरा को ऑनलाइन बढ़ा सकते हैं। इस उद्देश्य के लिए भी libs हैं। (Example)

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