Safari 获取内联块浮动元素的 % 宽度错误答案

【问题标题】：Safari getting % widths wrong for inline-block floated elementsSafari 获取内联块浮动元素的 % 宽度错误
【发布时间】：2014-04-02 00:29:34
【问题描述】：

我正在使用 JQDateRangeSlider 来达到预期目的。不幸的是，我在标尺部分遇到问题，我用它来显示新的月份/年份，与此处的示例非常相似：

http://ghusse.github.io/jQRangeSlider/options.html#scalesOption

我在 Safari 上演示我的界面时注意到，最后应该有更多滴答声。这似乎不是 JavaScript 或插件问题，因为宽度是按百分比计算的。纯属显示问题。问题如下图所示：

问题是当您有许多 inline-block 浮动元素时，它们的宽度和 margin-left 属性以 % 的形式给出，例如：

<div class="ui-ruler-scale ui-ruler-scale1">

<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 2%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 2%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 2%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 2%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 2%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 2%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 2%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 2%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 2%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"></div>

</div>

CSS 不需要很复杂，因为内联样式可以完成大部分工作。在下面的示例中，元素向左浮动并设置了 margin-left。

我已经设置了一个仅基于 HTML + CSS 的 JSFiddle，它显示了问题。澄清一下，即使对于基本宽度（例如 1%），这似乎也是一个问题，而不仅仅是像我的示例中那样复杂的多小数点宽度。

http://jsfiddle.net/uLLMe/14/

不幸的是，我无法以友好的方式格式化 HTML，或者它添加了空格，所以它相当不可读。

谢谢

【问题讨论】：

根据getbootstrap.com/getting-started/#support-safari-percentages，iOS Safari 在百分比宽度方面存在一些问题。我猜你在桌面上遇到了类似的问题？
关于空白问题，请查看我制定的简单解决方案：stackoverflow.com/a/14776780/1654265
我认为@OllyHodgson 的评论实际上可能是正确的答案：/
哇，好地方 Olly，谢谢。当然，这对 Safari 来说是一个可怕的疏忽？怎么没有更多的人为此而苦苦挣扎？！
仅供参考，您的代码不会显示任何浮动元素。内联块与浮动没有任何关系。事实上，行内块元素不能浮动 - 浮动始终是块级块容器。

标签： html css safari webkit

【解决方案1】：

1% 的宽度太多！其他浏览器和 Safari 之间可能存在一些舍入或其他较小的布局差异。我建议弄清楚你想要的宽度并使用像“20px”这样的设置宽度。如果您需要以百分比表示的宽度，请尝试使用包含的 div ——也许稍微改变一下大小？使其像素数为偶数（可按您的百分比 # 均分，例如，如果您有 50 个 1% 的 div，则将包含 div 的宽度设为 50 的倍数...？）。

还有一些想法......

在 div 中添加一些“foo”内容？

<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"> &nbsp; </div>

尝试让它们不内联...

<div class="ui-ruler-tick" style=" display:block; float:left; width: 1%;"></div>

【讨论】：