Question

我这里有一些代码将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>

修改

有趣的是，分成5个作品ok http://jsfiddle.net/LZxxB/33/

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

Answer 1

我正在使用桌面浏览器并且正如您所提到的那样设置49px，而不是50px。

只需将height更改为height:16.999%;（每个50px）就可以解决这个问题吗？

Fiddle

更新：我在不同浏览器中测试过，Chrome正在设置50px，Safari正在设置49px。这就是浏览器之间舍入算法的差异。只需设置高于50px的高度（例如16.69％）应该可以跨浏览器工作..

此Fiddle对我来说在chrome和safari上都很好。

Answer 2

请更新此

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

谢谢，

不能将div分成6个部分

2 个答案: