带有不透明度的内联块ul导致结束切断

Question

https://jsfiddle.net/23ng6rqg/2/

ul {
  list-style: none;
  display: inline-block;
}
ul > li {
  opacity: .5;
}
ul > li:hover {
  opacity: 1;
  cursor: pointer;
}

<ul>
  <li>stuff</li>
  <li>stuff</li>
  <li>stuff</li>
  <li>stuff</li>
  <li>stuff</li>
  <li>stuff</li>
  <li>stuff</li>
  <li>stuff</li>
</ul>

在Chrome 43.0.2357.124中，此CSS会导致“stuff”的最后一个f中的尾部被切断。我可以看到它与ul的宽度有关，因为删除inline-block（使其变为全宽）会使行为消失。

我在IE和Firefox中测试了这个;这种行为不会发生在他们身上。

有两个问题：

1. 为什么将ul设置为inline-block导致宽度对于“f”的尾部来说太短？

2. 为什么opacity会导致其父项溢出的项目被切断？

Answer 1

当不透明度应用于li时，实际上会出现问题，将不透明度设置为1，如下所示：

ul > li {
    opacity: 1;
}  

＆＃39; f＆＃39;不会被削减。

经过一些调查后，似乎使用inline-block显示的不透明度会对webkit浏览器中的文本产生一些影响，因为它会削弱笔划，从而影响文本的溢出范围。< / p>

我设法通过添加-webkit-text-stroke来解决此问题。我想这允许浏览器重新解释相对于为文本笔划属性设置的像素数的实际笔划大小：

ul > li {
    opacity: .5;
    -webkit-text-stroke: 0.1px
}