Question

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

以下代码中的警告未在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>

Answer 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值（与内容框默认值相对）使最终呈现的框具有声明的宽度，并在框内部切割任何边框和填充。

Answer 2

发现它!! 以某种方式，缩放设置为，猜测，110％ - 并且只在该标签上！我不知道怎么样，不看那里，从不使用它。（（腮红））

Chrome误读了最大高度和最大宽度

2 个答案: