I've been scanning through all the popular js libraries, but I can't find one that has a width function for a DOM element that actually accounts for quirks mode in Internet Explorer. The issue is that padding and borders don't get counted in the the width when quirks mode is engaged. As far as I can tell this happens when the doctype is left out or the doctype is set to html 3.2.
Obviously I could just set the doctype to something standards pliant, but this script can be embedded anywhere so I don't have control over the doctype.
To break the problem down into smaller parts:
1) How do you detect quirks mode? 2) What's the best way to extract the border and padding from an element to pensate?
Example with prototype:
<html>
<head>
</head>
<body>
<div id="mydiv" style="width: 250px; pading-left: 1px; border: 2px black solid">hello</div>
<script>
alert($('mydiv').getWidth())
</script>
</body>
</html>
result:
253 (ff) 250 (ie)
Thanks in advance!
I've been scanning through all the popular js libraries, but I can't find one that has a width function for a DOM element that actually accounts for quirks mode in Internet Explorer. The issue is that padding and borders don't get counted in the the width when quirks mode is engaged. As far as I can tell this happens when the doctype is left out or the doctype is set to html 3.2.
Obviously I could just set the doctype to something standards pliant, but this script can be embedded anywhere so I don't have control over the doctype.
To break the problem down into smaller parts:
1) How do you detect quirks mode? 2) What's the best way to extract the border and padding from an element to pensate?
Example with prototype:
<html>
<head>
</head>
<body>
<div id="mydiv" style="width: 250px; pading-left: 1px; border: 2px black solid">hello</div>
<script>
alert($('mydiv').getWidth())
</script>
</body>
</html>
result:
253 (ff) 250 (ie)
Thanks in advance!
Share Improve this question edited Sep 21, 2017 at 21:04 P.S. 16.4k14 gold badges65 silver badges86 bronze badges asked Oct 21, 2008 at 9:37 christoffchristoff 5871 gold badge6 silver badges17 bronze badges3 Answers
Reset to default 2@1
document.patMode
"CSS1Compat" means "standards mode" and "BackCompat" means "quirks mode".
@2
offsetWidth property of a HTML elements gives its width on screen, in pixels.
<div id="mydiv" style="width: 250px; padding-left: 1px; border: 2px black solid">hello</div>
document.getElementById('mydiv').offsetWidth
//255 (standards) 250 (quirks)
A function that pensates the width for IE quirksmode has to check for the rendering mode then add borders and padding to the width;
function pensateWidth( el, targetWidth ){
var removeUnit = function( str ){
if( str.indexOf('px') ){
return str.replace('px','') * 1;
}
else { //because won't work for other units... one may wish to implement
return 0;
}
}
if(document.patMode && document.patMode=="BackCompat"){
if(targetWidth && el.offsetWidth < targetWidth){
el.style.width = targetWidth;
}
else if (el.currentStyle){
var borders = removeUnit(el.currentStyle['borderLeftWidth']) + removeUnit(el.currentStyle['borderRightWidth']);
var paddings = removeUnit(el.currentStyle['paddingLeft']) + removeUnit(el.currentStyle['paddingRight']);
el.style.width = el.offsetWidth + borders + paddings +'px';
}
}
}
Now there are two ways to use it:
var div = document.getElementById('mydiv')
// will try to calculate target width, but won't be able to work with units other than px
pensateWidth( div );
//if you know what the width should be in standards mode
pensateWidth( div, 254 );
The library is probably telling the true. The problem is not that the readings are incorect but that the acutal display is incorect. As an example try:
<div id="mydiv" style="width: 100px; border-left: 100px black solid;"> </div>
then try to change the text inside the div to see what is happening. IE will display various values depending on the text inside while FF will display correctly. IE is trying to fill an 100px + something into a 100px space with various results.
jQuery has two methods for width: .width and .outerWidth. .outerWidth will return the full width of the element. It also has the possiblity to get all the other properties (padding, border etc) like in the example bellow:
$(document).ready(function() {
alert("width=" + $('#mydiv').width()
+ " outerWidth=" + $('#mydiv').outerWidth()
+ " borderLeftWidth=" + $('#mydiv').css("borderLeftWidth"))
});
javascript:(function(){
var mode=document.patmode,m;if(mode){
if(mode=='BackCompat')m='quirks';
else if(mode=='CSS1Compat')m='Standard';
else m='Almost Standard';
alert('The page is rendering in '+m+' mode.');
}
})();
that code will detect the mode for you.
IE will also throw into quirks mode if ANYTHING but doctype is on the first line. Even a blank first line with doctype on the second line will cause quirks mode.