html - Safari 获取内联 block float 元素的 % 宽度错误

Question

我正在使用 JQDateRangeSlider，这是为了它的目的。不幸的是，我在使用标尺部分显示新的月份/年份时遇到问题，与此处的示例非常相似:

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

我在 Safari 上演示我的界面时注意到，末尾应该有更多刻度的地方有一个空隙。这似乎不是 JavaScript 或插件问题，因为宽度是按百分比计算的。纯粹是显示问题。问题如下图所示:

问题是当您有许多内联 block float 元素时，其宽度和 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，或者它添加了空格，因此它相当不可读。

谢谢

Answer 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>