गतिशील तत्व चौड़ाई और आईई 9 उप-पिक्सेल परिशुद्धता

Question

मेरे पास 3 divs, #left, #center और #right है कि मैं एक ही पंक्ति पर स्थिति रखना चाहता हूं जिसमें एक विशिष्ट चौड़ाई है, 300px कहें।

# बाएं और # दाएं कम सामग्री है, प्रत्येक 50px कहें, और मैं उन्हें पूरी तरह से प्रदर्शित कर रहा हूं।

#center में बहुत सारी सामग्री है, 400px कहें, और मैं लाइन पर शेष स्थान के भीतर जितना संभव हो प्रदर्शित करना चाहता हूं। इसके लिए, मैंने # लेजर के भीतर # सेंसर की सामग्री शामिल की है।

मैंने # बाएं और # सेंसर को बाएं और दाएं से दाएं तरफ तैर दिया है।

<div id="left"> 
    LEFT 
</div> 
<div id="center"> 
    <div id="inner"> 
     LONG CONTENT ... 
    </div> 
</div> 
<div id="right"> 
    RIGHT 
</div> 

Example fiddle

प्रश्न 1: वहाँ हमारे उदाहरण में #center सीएसएस के माध्यम से लाइन पर उपलब्ध शेष अंतरिक्ष के सभी ले div (बनाने का एक रास्ता है, #center 200px विस्तृत हो गया है - रेखा की चौड़ाई, 300 पीएक्स, # बाएं और # राइट की चौड़ाई, प्रत्येक 50 पीएक्स)?

प्रश्न 2: मुझे सीएसएस के माध्यम से कोई समाधान नहीं मिला और मैंने शेष उपलब्ध स्थान की गतिशील गणना करने के लिए jQuery का उपयोग किया है। यह IE9 को छोड़कर सभी ब्राउज़रों में ठीक काम करता है।

आईई 9 के साथ समस्या यह है कि इसमें उप-पिक्सेल परिशुद्धता है और jQuery तत्वों के आयामों के लिए केवल पूर्णांक मान देता है।

यहां एक उदाहरण दिया गया है: IE9 #.5 को 50.5px चौड़ाई के रूप में देखता है जबकि jQuery इसे 50px के रूप में देखता है। यह अंतर IE9 में लेआउट को तोड़ने का कारण बनता है।

यदि मुझे जावास्क्रिप्ट के माध्यम से उपलब्ध स्थान की गणना करने की आवश्यकता है, तो मैं इस IE9 मुद्दे को दूर करने के लिए क्या कर सकता हूं?

main = $("#main").width(); 
centerWidth = main - ($("#left").width() + $("#right").width()); 
$("#center").width(centerWidth); 

या:

Answer 1

भविष्य में संदर्भ के लिए, क्या मैंने किया था चौड़ाई कि IE9 कि jQuery एक पूर्णांक के रूप में देखता मूल्य के लिए एक नाव के रूप में देखता मजबूर करना था, :

var elem = $("#element"); 
elem.css("width", elem.width()); 

तो #element 50.5px रूप IE9 द्वारा देखा एक मूल्य था, jQuery इस पर एक मूल्य है कि jQuery देखता है, 50px बाध्य करती है।

Answer 2

इस कोशिश

main = parseFloat(document.getElementById("main").style.width) 
centerWidth = main - (parseFloat(document.getElementById("left").style.width) + parseFloat(document.getElementById("right").style.width)); 
document.getElementById("center").style.width = centerWidth + "px" 

Answer 3

मेरे समाधान:

el = $('#myelement'); 

//Hello IE9-10 and float "width", e.g. 83.41px; 
try { 
    var elWidth = Math.ceil(parseFloat(getComputedStyle(el[0]).width)); 
} 
//But old browser doesn't know "getComputedStyle()" e.g. IE 8 and oldest; 
catch (e) { 
    var elWidth = el.width(); 
} 

elWidth; //IE 9-10 return 84px, other browsers 83px;