Safari獲取％寬度錯誤的內嵌塊浮動元素

我正在使用JQDateRangeSlider，它的目的是什麼。不幸的是我有標尺部分問題，其中我使用展示新個月/年，非常相似，這裏的例子：Safari獲取％寬度錯誤的內嵌塊浮動元素

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

我demoing我的界面上的Safari瀏覽器，有一個當發現在更多的蜱應該是結束的差距。這看起來不是JavaScript或插件問題，因爲寬度是以百分比計算的。這純粹是一個顯示問題。作爲顯示在下面的圖像中的問題：

Image showing issue

的問題是，當你有許多內聯塊的浮動元素，其寬度和利潤率左性質列作爲％，例如：

<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％），這似乎也是一個問題，而不僅僅是像我的示例中的複雜的多位小數點寬度。

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

可惜我不能以友好的方式格式化HTML，或把它添加空格，以這是相當不可讀。

謝謝

來源

2014-03-19 Chris

據http://getbootstrap.com/getting-started/#support-safari-percentages，iOS的Safari瀏覽器與百分比寬度的一些問題。我猜你在桌面上遇到類似的問題？ –

關於空白問題，請查看我制定的簡單解決方案：http://stackoverflow.com/a/14776780/1654265 –

我認爲@OllyHodgson的評論實際上可能是正確答案：/ –

太寬1％！有可能是其他瀏覽器和Safari之間存在舍入或其他小的佈局差異。我會建議找出你想要的寬度，並使用像「20px」的設置寬度來代替。如果您需要以百分比表示的寬度，請嘗試使用包含的div進行遊戲 - 可能會稍微改變大小？使它成爲偶數個像素（可按照您的百分比均勻分割，例如，如果您有50個1％的div，請將包含div的寬度設置爲50 ...的倍數）。

，還有一些人的想法......

添加一些「富」內容的div？

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

來源

2014-04-01 16:29:34 Joshua

Safari獲取％寬度錯誤的內嵌塊浮動元素

回答

相關問題