Html Can'；不要把一个div等分为6部分

我这里有一些代码，它将一个div等分为六个

在桌面浏览器上，这似乎可以正常工作。在iOS上的safrai/chrome上，它没有

你可以在这里看

在我的桌面浏览器上，每个div的高度是50px，并填充容器。 在移动浏览器上，每个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>

身体{
颜色：白色；
}
#一、三、五{
背景：蓝色；
}
#二、四、六{
背景：绿色；
}
.字符串{
身高：100%；
宽度：100%；
位置：相对位置；
}
.字符串{
z指数：2；
身高：16.666%；
}
白板纸{
位置：相对位置；
宽度：100%；
高度：300px；
背景色：红色；
}
$（'one'）.text（$（'one'）.height（））；
$（'two'）.text（$（'two'）.height（））；
$（'三'）.text（$（'三'）.height（））；
$（'四'）.text（$（'四'）.height（））；
$（'五'）.text（$（'五'）.height（））；
$（'六'）.text（$（'六'）.height（））；

编辑

有趣的是，分成5部分就可以了

---

在safrai mobile中使用百分比时是否有小数位数限制？

我使用的是桌面浏览器，它设置的是

49px

，而不是您提到的

50px

只需将

height

更改为

height:16.999%；

（

50px

每个）就可以为我解决这个问题

Updte：我在不同的浏览器中进行了测试，Chrome设置为

50px

，Safari设置为

49px

。这可能是浏览器之间取整算法的差异。只需将高度设置为略高于50px（例如16.69%）就可以跨浏览器工作

这对我来说在chrome和safari上都很好用。

请更新

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

---

谢谢，

浏览器正在设置49%。我告诉浏览器设置为300px容器高度的16.666%。你会看到，在桌面上，每个div的高度都设置为50，但在移动设备上，它是49。一定有一些舍入现象。@极权主义是的，你使用的术语

桌面浏览器

让我感到困惑，因为我在桌面上使用safari时，它只显示了49px。这是舍入算法的不同，将高度设置为刚好高于

50px

（例如：

16.777%

）将确保它可以跨浏览器工作。谢谢。这很有意义现在在桌面上div太大了。即，51px而不是50px