我正在使用JQDateRangeSlider,用于它的目的。不幸的是我遇到了标尺部分的问题,我用它来显示新的月份/年份,与此处的示例非常相似:
http://ghusse.github.io/jQRangeSlider/options.html#scalesOption
我注意到在演示我的界面时,在Safari上,最后有一个间隙应该有更多的刻度。这似乎不是JavaScript或插件问题,因为宽度计算为百分比。这纯粹是一个显示问题。问题如下图所示:
问题是当你有多个内联块浮动元素时,其宽度和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不需要复杂,因为内联样式可以完成大部分工作。在下面的示例中,元素向左浮动并且设置了左边距。
我已经建立了一个基于HTML + CSS的JSFiddle,它显示了问题。为了澄清,这似乎是一个问题,即使基本宽度,如1%,而不是像我的例子中复杂的多小数点宽度。
不幸的是,我无法以友好的方式格式化HTML,或者它添加了空格,因此它非常难以理解。
由于
答案 0 :(得分:0)
宽度超过1%!有可能是其他浏览器和Safari之间存在一些舍入或其他次要布局差异。我建议找出你想要的宽度并使用像#34; 20px&#34;代替。如果您需要以百分比表示的宽度,请尝试使用包含div - 也许稍微改变大小?使其成为偶数个像素(按百分比数均匀分割,例如,如果你有50个1%的div,则使包含div的宽度为50的倍数......?)。
还有一些想法......
添加一些&#34; foo&#34;内容到divs?
<div class="ui-ruler-tick" style="display: inline-block; width: 1%;"> </div>
尝试使它们不是内联...
<div class="ui-ruler-tick" style=" display:block; float:left; width: 1%;"></div>