IE10,Opera 12 ::不透明度:<1,显示:内联导致奇怪的裁剪

Question

在这个问题中 - 如果工作人员和社区不介意 - 我想解决不同浏览器的两个不同的错误,虽然在相同条件下出现.

当一个元素display:inline(和a box-shadow,但这里设置更多用于演示目的)得到opacity小于1 时,就会发生错误.然后

1. IE 10(至少)将盒子阴影切断,就像设置了"overflow:hidden"一样.
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;
}

一个现实的例子.我对这种情况感到非常沮丧.对我来说似乎很奇怪和不自然.非常感谢任何帮助.

谢谢!

---

更新.似乎我找到了IE的一些解决方法.事实证明,我们可以将它box-shadow移到左边和顶部(它没有在这个bug中裁剪的方向).并且为了使元素在视觉上占据相同的空间,transform可以应用a.这里更好看

@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父元素，就像这样。