Chrome错误读取最大高度和最大宽度
[英]Chrome mis-reading max-height and max-width
问题描述
I am really confused... 
我真的很困惑
The alert in the following code doesn't show the right values for max-height and max-width in Chrome. 以下代码中的警报未在Chrome中显示max-height和max-width的正确值。 I consistently get values 10% larger than the real ones! 我始终获得比真实值大10％的值！ In Chrome the alert is: "height: 500, max height x width: 1100 x 2200, padding: 20". 在Chrome中，警报为：“高度：500，最大高度x宽度：1100 x 2200，填充：20”。 In any other browser the values are correct and it was fine in jsfiddle too (run in Chrome). 在任何其他浏览器中，该值都是正确的，并且在jsfiddle中也可以（在Chrome中运行）。
Am I missing something obvious? 我是否缺少明显的东西？
Splitting the compound parseInt/.css("..") gave the same results, ie 1100px 1100 拆分复合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>
2 个解决方案
解决方案1
0 2012-02-26 00:09:11
Try this. 尝试这个。
#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+ */
}
The border-box value (as opposed to the content-box default) makes the final rendered box the declared width, and any border and padding cut inside the box. border-box的值（与content-box的默认值相对）使最终渲染的框具有声明的宽度，并在框内剪切任何边框和填充。
解决方案2
0 2012-02-27 07:49:45
Found it!! 找到了！！ Somehow , the zoom was set to, guess, 110% - and only on that tab! 不知何故 ，缩放比例设置为110％-仅在该选项卡上！ I have no idea how, didn't look there, never use it. 我不知道怎么去，没看那里，从不使用它。 ((blush)) （（脸红））
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.