Jquery 铬错误读取最大高度和最大宽度_Jquery_Css_Google Chrome

Jquery 铬错误读取最大高度和最大宽度

jquery css google-chrome

Jquery 铬错误读取最大高度和最大宽度,jquery,css,google-chrome,Jquery,Css,Google Chrome,我真的很困惑以下代码中的警报在Chrome中未显示正确的“最大高度”和“最大宽度”值。我总是得到比真实值大10%的值！在Chrome中，警告是：“高度：500，最大高度x宽度：1100 x 2200，填充：20”。在任何其他浏览器中，这些值都是正确的，在jsfiddle中也可以（在Chrome中运行）我错过了什么明显的东西吗拆分复合parseInt/.css（“..”）会得到相同的结果，即1100px1100 <!DOCTYPE html PUBLIC "-//W3C//DTD XH

我真的很困惑

以下代码中的警报在Chrome中未显示正确的“最大高度”和“最大宽度”值。我总是得到比真实值大10%的值！在Chrome中，警告是：“高度：500，最大高度x宽度：1100 x 2200，填充：20”。在任何其他浏览器中，这些值都是正确的，在jsfiddle中也可以（在Chrome中运行）

我错过了什么明显的东西吗

拆分复合parseInt/.css（“..”）会得到相同的结果，即1100px1100

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#mainContent { 
    height: 500px;
    max-height: 1000px;
    max-width: 2000px;
    padding-left: 20px;
} 
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    var height = parseInt($("#mainContent").height());
    var maxHeight = parseInt($("#mainContent").css("max-height"), 10);
    var mainContentWidthPadding = parseInt($("#mainContent").css("padding-left"), 10);
    var maxWidth = parseInt($("#mainContent").css("max-width"), 10);
    alert("height: " + height + ", max height x width: " + maxHeight + " x " + maxWidth + ", padding: " + mainContentWidthPadding);
});
</script>

</head>

<body>
<div id="mainContent"></div>

</body>
</html>


无标题文件
#主要内容{
高度：500px；
最大高度：1000px；
最大宽度：2000px；
左侧填充：20px；
} 
$（文档）.ready（函数（）{
var height=parseInt（$（“#mainContent”）.height（）；
var maxHeight=parseInt（$（“#mainContent”）.css（“最大高度”），10）；
var mainContentWidthPadding=parseInt（$（“#mainContent”）.css（“左填充”），10）；
var maxWidth=parseInt（$（“#mainContent”）.css（“最大宽度”），10）；
警报（“高度：+height+”，最大高度x宽度：+maxHeight+“x”+maxWidth+”，填充：+mainContentWidthPadding）；
});

试试这个

#mainContent {
    height: 500px;
    max-height: 1000px;
    max-width: 2000px;
    padding-left: 20px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

边框框值（与内容框默认值相反）使最终渲染的框成为声明的宽度，并在框内剪切任何边框和填充

找到了！！不知怎的，变焦被设置为，猜猜，110%——并且只在那个标签上！我不知道该怎么做，没看过，也没用过。（（脸红））

恐怕没什么区别。真奇怪！