铬的不透明度错误

Question

当为奇数个子flex元素赋予不透明度时，Chrome中的元素之间会随机出现一个空格。它不存在于Firefox或Safari中。

子类具有以下样式：

.dot{
    flex:1;
    background:red;
    opacity:0.5;
    cursor:pointer;
    margin:0;
    padding:0;
   }

在此处找到fiddle

正如其中一个答案中所提到的那样，奇数个孩子在弹性和宽度方面都存在问题。除了使用rgba之外，还有其他解决方法。

Answer 1

以前的回答并没有解决问题。

以下是无法重现错误的人的屏幕截图：

我找到了另一种快速简便的解决方案。 opacity属性以某种方式在flex项之间添加空格。

所以你可以使用background: rgba()代替它。

.parent{
 width:200px;
 height:15px;
 display:flex;
 border:1px solid black;
}
.dot{
 flex:1;
 background-color:rgba(255,0,0,0.5);
 cursor:pointer;
 margin:0;
 padding:0;
}
.dot:hover{
  background-color:rgba(255,0,0,1);
}

<div class="parent">
 <div class="dot"></div>
 <div class="dot"></div>
 <div class="dot"></div>
 <div class="dot"></div>
 <div class="dot"></div>
 <div class="dot"></div>
 <div class="dot"></div>
</div>

Answer 2

.parent设置为width: 200px;，而.dot正在flex: 1;添加flex-basis: 100%;。由于子.dot的数量是奇数（在这种情况下为7），因此会导致使用chrome进行百分比舍入问题。 请参阅link。