IE10，Opera 12 ::不透明度：＆lt; 1，显示：内联导致奇怪的裁剪

Question

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

当一个元素display:inline（以及box-shadow，但此处设置为更多用于演示目的时）会发生错误，导致opacity小于1.然后

1. IE 10（至少）砍掉盒子阴影，好像＆＃34;溢出：隐藏＆＃34;已经确定了。
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。