css - 添加百分比以完全拉伸(stretch)时遇到问题

Question

我正在尝试使具有不同颜色内部元素的 ul 均匀拉伸(stretch) 100%。直到我在 1280px 下测试才好。我必须最小化窗 Eloquent 能看到它，而且间歇性很难捕捉到。一切都加起来。我真的不知道这里出了什么问题。任何帮助将非常感激。谢谢。

http://codepen.io/Compton/pen/xdGpm/

<div id="colour-bar">
<ul>
 <li class="orange"></li>
 <li class="spacer"></li>
 <li class="red"></li>
 <li class="spacer"></li>
 <li class="pink"></li>
 <li class="spacer"></li>
 <li class="purple"></li>
 <li class="spacer"></li>
 <li class="blue"></li>
 <li class="spacer"></li>
 <li class="green"></li>
 <li class="spacer"></li>
 <li class="yellow"></li>
</ul>
</div>

.orange {
    background-color:#f37028;
}

.red {
    background-color:#ed1b24;
}

.pink {
    background-color:#e54198;
}

.purple {
    background-color:#6b439c;
}

.blue {
    background-color:#0193cf;
}

.green {
    background-color:#91ff01;
}

.yellow {
    background-color:#fff300;
}

#colour-bar {
    top:0;
    left:0;
    width:100%;
    position:fixed;
    height:10px;
    background-color:#FFFFFF;
}

#colour-bar ul {
    width:100%;
    height:100%;
    padding:0;
    margin:0;
}

#colour-bar ul li {
    width:14.24%;
    height:100%;
    float:left;
    list-style:none;
}

#colour-bar ul li.spacer {  
   width:0.05333%;
   height:100%;
   display:block;
   float:left;
}

Answer 1

出现此问题的原因可能是每个浏览器在某些视口(viewport)宽度下引入的一些舍入不准确，因此有时元素之间的空间会消失。

此外，您的间隔元素的宽度为可用宽度的 0.0533%，因此这意味着当容器至少为 时，空间恰好为 1px >1876px wide: 这个宽度的下面是浏览器如何舍入值的选择

试试这个代码:http://codepen.io/anon/pen/ioxtE

我首先建议删除所有 spacer 元素(因为它是空标记，仅用于样式目的，因此是一种不好的做法)

<div id="colour-bar">
 <ul>
   <li class="orange"></li>
   <li class="red"></li>
   <li class="pink"></li>
   <li class="purple"></li>
   <li class="blue"></li>
   <li class="green"></li>
   <li class="yellow"></li>
 </ul>
</div>

然后在列表项之间留一个空格

#colour-bar li + li {
  border-left: 1px #fff solid;
}

并分配这个样式

#colour-bar ul li {
   width:14.275%;   /*  ~(100/7)  */
   ...
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

并且颜色之间的空间始终在其位置