Question

我一直在浏览所有流行的js库，但我找不到一个具有宽度函数的DOM元素实际上在Internet Explorer中占用了怪癖模式。问题是当使用怪癖模式时，填充和边框不会计入宽度。据我所知，当doctype被省略或doctype设置为html 3.2时会发生这种情况。

显然我可以将doctype设置为符合标准的东西，但是这个脚本可以嵌入任何地方，所以我无法控制doctype。

将问题分解为更小的部分：

1）你如何检测怪癖模式？ 2）从元素中提取边框和填充以补偿的最佳方法是什么？

原型示例：

<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>

结果：

253（ff） 250（即）

提前致谢！

Answer 1

@ 1

document.compatMode

“CSS1Compat”表示“标准模式”，“BackCompat”表示“ quirks mode ”。

@ 2

HTML元素的offsetWidth属性在屏幕上显示其宽度，以像素为单位。

<div id="mydiv" style="width: 250px; padding-left: 1px; border: 2px black solid">hello</div>

document.getElementById('mydiv').offsetWidth
//255 (standards) 250 (quirks)

补偿IE quirksmode宽度的函数必须检查渲染模式，然后在宽度上添加边框和填充;

function compensateWidth( 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.compatMode && document.compatMode=="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';
        }
    }

}

现在有两种方法可以使用它：

var div = document.getElementById('mydiv')
// will try to calculate target width, but won't be able to work with units other than px
compensateWidth( div );

//if you know what the width should be in standards mode
compensateWidth( div, 254 );

Answer 2

图书馆可能说的是真的。问题不在于读数是否是直接的，而是实际的显示是复杂的。举个例子来试试：

<div id="mydiv" style="width: 100px; border-left: 100px black solid;">&nbsp;</div>

然后尝试更改div中的文本以查看发生了什么。 IE将根据文本内部显示各种值，而FF将正确显示。 IE正在尝试将100px +的内容填充到100px的空间中，并产生各种结果。

jQuery有两种宽度方法：.width和.outerWidth。 .outerWidth将返回元素的整个宽度。它还有可能获得所有其他属性（填充，边框等），如下例所示：

$(document).ready(function() {
    alert("width=" + $('#mydiv').width() 
    + " outerWidth=" + $('#mydiv').outerWidth() 
    + " borderLeftWidth=" + $('#mydiv').css("borderLeftWidth"))
});

Answer 3

javascript:(function(){
    var mode=document.compatmode,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.');
    }
})();

该代码将为您检测模式。

如果ANYTHING但doctype在第一行，IE也将进入怪癖模式。即使第二行上带有doctype的空白第一行也会导致怪癖模式。

在javascript中占用怪癖模式的元素的宽度？

3 个答案: