getComputedStyle क्रोम/सफारी/फ़ायरफ़ॉक्स और आईई 11

Question

के बीच विभिन्न ऊंचाइयों की रिपोर्टिंग प्राप्त करता है यह मुझे पूरे दिन थोड़ा सा लड़ाकू चला रहा है और मैं यह नहीं ढूंढ पाया कि किसी और ने इस विसंगति को दस्तावेज किया है।

window.getComputedStyle(el).height 

डेमो के लिए http://jsfiddle.net/ZwF9H/6/ देखें।

मुझे उम्मीद है कि window.getComputedStyle() को सभी ब्राउज़रों के बीच समान गणना ऊंचाई मान वापस करना चाहिए। इंटरनेट एक्सप्लोरर 11 कुछ अलग कर रहा है। (असल में, आईई 9 और 10 भी हैं, लेकिन आईई 11 पहला था जिसे मैं काम करने के लिए देव उपकरण प्राप्त कर सकता था।)

अन्य सभी ब्राउज़रों के लिए, गणना की ऊंचाई सीएसएस में ऊंचाई सेट है चाहे वह स्टाइलशीट या textarea तत्व पर इनलाइन में हो।

आईई 11 बॉक्स आकार का अनदेखा कर रहा है: सीमा-रेखा घोषणा और पैडिंग और मार्जिन घटाता है, जो मुझे लगता है कि गलत है।

क्या यह एक बग है, क्या मैं कुछ गलत कर रहा हूं, क्या यह एक तथ्य है कि IE11 गणना मूल्यों को अलग-अलग देता है?

Answer 1

Element.height सामग्री क्षेत्र के भीतर ऊंचाई निर्दिष्ट करता है, जिसमें पैडिंग या सीमा शामिल नहीं है। इसके बारे में यहां अधिक जानकारी है (https://developer.mozilla.org/en-US/docs/Web/CSS/height)।

यदि आपके पास यह विकल्प उपलब्ध है तो मैं jQuery के $ el.outerHeight() का उपयोग करने का सुझाव दूंगा।

Answer 2

उपयोग polyfill

वहाँ दो polyfills जो इस बग को ठीक करता हैं:

1. jonathantneal/Polyfills-for-IE8

https://github.com/jonathantneal/Polyfills-for-IE8/blob/master/getComputedStyle.js

1. jonathantneal/polyfill

https://github.com/jonathantneal/polyfill/blob/master/polyfills/getComputedStyle/polyfill.js

ऐसा लगता है कि यह समस्या को हल करता है।

Demo with 1st polyfill

//SO says that I must add code here, but it's too long 

Demo with 2nd polyfill

//look at demo 

Answer 3

मैं IE11, जहां यह सीमा बॉक्स ऊंचाई से box-sizing: border-box; और इस तरह यह घटाकर था गद्दी अनदेखी की गई थी के साथ एक ही समस्या थी, मुझे छोटे दे क्रोम की तुलना में height मूल्यों की सूचना दी।

मैंने पाया कि getBoundingClientRect().heightIE11 और क्रोम में उचित ऊंचाई (ठीक से box-sizing: border-box; अवलोकन) रिपोर्ट किया था। तो इसने मेरे लिए समस्या हल कर दी है।