不能將div等分爲6部分

我在這裏有一些代碼將div等分爲6。不能將div等分爲6部分

在桌面瀏覽器上，這似乎工作正常。在iOS上的safrai/chrome上，它沒有。

你可以在這裏查看

在我的桌面瀏覽器，每一個div的高度是50像素，並填充容器。在手機瀏覽器，對於每一個DIV高度爲49px，葉在包裝底部的空間（你可以看到這是上面的小提琴一條紅線。

任何想法，爲什麼？

<div class="fretboardWrapper"> 
    <div class="strings"> 
     <div class="string" id="one"></div> 
     <div class="string" id="two"></div> 
     <div class="string" id="three"></div> 
     <div class="string" id="four"></div> 
     <div class="string" id="five"></div> 
     <div class="string" id="six"></div> 
    </div> 
</div> 

body{ 
    color:white; 
} 

#one, #three, #five { 
    background:blue; 
} 
#two, #four, #six { 
    background:green; 
} 
.strings { 
    height:100%; 
    width:100%; 
    position:relative; 
} 
.string { 
    z-index:2; 
    height:16.666%; 
} 
.fretboardWrapper { 
    position:relative; 
    width:100%; 
    height:300px; 
    background-color:red; 
} 

<script> 
$('#one').text($('#one').height()); 
$('#two').text($('#two').height()); 
$('#three').text($('#three').height()); 
$('#four').text($('#four').height()); 
$('#five').text($('#five').height()); 
$('#six').text($('#six').height()); 
</script>

編輯

有趣的是，劃分爲5工作正常http://jsfiddle.net/LZxxB/33/

是否有小數位限制在safrai移動使用百分比時？

來源

2014-03-31 totalitarian

我正在使用桌面瀏覽器，它的設置是49px，而不是您提到的50px。

只需將height更改爲height:16.999%;（各）解決了我的問題？

Fiddle

Updte：我在不同的瀏覽器進行測試，鉻是設置50px，Safari瀏覽器是設置49px。這很大程度上是瀏覽器之間舍入算法的差異。簡單地設置高度略高於50像素（用於如：16.69％），可能應該工作的跨瀏覽器..

這Fiddle是兩個Chrome和Safari的工作對我罰款..

來源

2014-03-31 11:01:14

瀏覽器設置爲49％。我告訴瀏覽器設置爲300px的容器高度的16.666％。你會發現在桌面上每個div的高度設置爲50，但是在移動設備上，它的高度爲49.必須進行一些舍入操作。 – totalitarian

@totalitarian是的，你使用的術語'桌面瀏覽器'讓我感到困惑，因爲我在桌面上使用safari，它只顯示49px。這是舍入算法的區別，設置高度大約在50px以上（例如：'16.777％'）將確保它可以跨瀏覽器工作.. –

謝謝。這很有道理 – totalitarian

-1

請更新此

.string { 
    z-index:2; 
    height:17%; 
}

謝謝，

來源

2014-03-31 11:18:09

現在在桌面上，divs太大了。即，51px而不是50px – totalitarian

不能將div等分爲6部分

回答

相關問題