Chrome 误读 max-height 和 max-width答案

【问题标题】：Chrome mis-reading max-height and max-widthChrome 误读 max-height 和 max-width
【发布时间】：2012-02-27 15:49:45
【问题描述】：

我真的很困惑......

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

我是否遗漏了一些明显的东西？

拆分复合 parseInt/.css("..") 得到相同的结果，即 1100px 1100

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

【问题讨论】：

标签： jquery css google-chrome

【解决方案1】：

试试这个。

#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+ */
}

border-box 值（与 content-box 默认值相反）使最终呈现的框具有声明的宽度，并且框内的任何边框和填充都被剪切。

【讨论】：

恐怕没有区别。真的很奇怪！

【解决方案2】：

找到了！！ 不知何故，缩放设置为，猜测，110% - 并且只在那个标签上！我不知道如何，没有看那里，从不使用它。（（脸红））

【讨论】：