css - IE10, Opera 12::Opacity:<1, display:inline 导致奇怪的裁剪

Question

在这个问题中 - 如果工作人员和社区不介意 - 我想解决不同浏览器的两个不同错误，尽管它们发生在相同的条件下。

当带有 display:inline 的元素(和 box-shadow，但这里设置更多是为了演示目的)获得 opacity 时，就会出现错误 小于 1 则

1. IE 10(至少)截断框阴影，就像设置了“溢出:隐藏”一样。
2. Opera 12.15 仅在文本的第一行留下框阴影。

用于演示问题的 HTML:

<span class="inline opaque">
    <span>Some text.</span>
</span>

CSS:

.inline{
    display:inline;
    background:red;
    box-shadow:0 0 0 10px red;
}
.inline.opaque{
    opacity:.5;
}

A live example .我真的对这件事感到沮丧。对我来说似乎很奇怪和不自然。非常感谢任何帮助。

谢谢!

---

更新。似乎我已经找到了 IE 的一些解决方法。事实证明，我们可以将 box-shadow 移动到左侧和顶部(在此错误中它不会裁剪的方向)。为了使元素在视觉上占据相同的空间，可以应用 transform。更好看here

@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){
    .block{
        -ms-transform:translate(5px, 5px);
        transform:translate(5px, 5px);
    }
    .inline{
        box-shadow:-5px -5px 0 5px #c0c;
    }
}

请注意，我们还需要移动(可能使用translate).inline 的内容。

Answer 1

display:inline 元素的每一行都是一个容器。如果您将 border:1px solid black 应用于您的文本，您可以看到这方面的证据。

因此，浏览器单独渲染每个阴影并不是不合理的，而且(不幸的是)这意味着将它们放在它之前的元素(阅读:行)之上。

至于为什么“裁剪”仅在某些浏览器中出现，并且仅当 opacity 小于 1 时……这不是我能回答的问题，因为这取决于浏览器的实现。也就是说...根据我的理解，裁剪技术上是正确的。

无论如何，“简单”的解决方法是将 opacity 应用于父元素，例如 so .