3

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

当我尝试outerWidth()使用 jquery 在 2 个 div 上设置相同的值时会出现问题，box-sizing: border-box其中一个具有填充，而另一个没有填充，并且浏览器缩放设置为“非圆形”值（例如 67% 或 33% on chrome 和几乎每一个都在 safari 上）。大小是相同的，除了在这些级别上，具有填充的一个比另一个小。

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

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

的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>
4

2 回答 2

1

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

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

#pad {
    padding-left: 5px;
}

jsFiddle

于 2013-03-04T09:27:04.437 回答
0

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

于 2013-03-08T16:20:52.513 回答