Question

我目前正在尝试使用动态宽度div上的缩放级别修复一些奇怪的行为，我有点困惑。

当我尝试使用jquery设置相同的outerWidth()值时，问题发生在2个div上，box-sizing: border-box一个有填充，而另一个没有，浏览器缩放设置为“not圆形“值（例如铬的67％或33％，几乎每一个都在野生动物园）。大小是相同的，除了在这些级别，其中填充的小于另一个。

这是我的问题的一个例子： http://jsfiddle.net/ARMMB/3/

编辑：澄清问题。有一种方法可以通过将它包装在另一个div中来绕过它，如@jimjimmy1995所说，但它不是一个完美的解决方案，因为它不能在不改变整个页面设计的情况下使用。我正在寻找一种方法来计算准确的大小，具体取决于缩放级别和填充量，如果它在这里工作，它应该是外部宽度的方式。

html：

<body>
    <div id ="a">text a</div>
    <div id ="b">text b</div>
</body>

css：

#a{
    background-color: red;
    border-right: 1px solid black;
    padding-left: 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#b{
    background-color: blue;
    border-right: 1px solid black;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

js：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    newWidth= 150;
    $("#a").outerWidth(newWidth);
    $("#b").outerWidth(newWidth);
  });
</script>

Answer 1

你必须将文本包装在另一个元素中并用它来应用填充。

<div id ="a"><span id="pad">text a</span></div>
<div id ="b">text b</div>

#pad {
    padding-left: 5px;
}

jsFiddle

Answer 2

基本上问题是浏览器在其他缩放级别上看到填充不同，如果你在safari中检查元素，你会看到虽然填充在样式表中定义为5px，但浏览器将其视为4像素并缩小。我做了一个基本上认为会解决你的问题的函数，但我最好的猜测是使用填充百分比并使用$(elem)[0].style.padding检测填充，然后通过除以大小来检测渲染元素的像素大小100将是实际的解决方案。无论如何，这是我构建的函数http://jsfiddle.net/ARMMB/10/

Webkit错误与填充，box-sizing和jQuery的outerWidth（）设置器在一些缩放级别

2 个答案:

jsFiddle