Css IE10，Opera 12:：不透明度：<；1、显示：内联导致奇怪的裁剪

在这个问题上——如果工作人员和社区不介意的话——我想解决不同浏览器的两个不同bug，尽管关注的是相同的条件

当具有

display:inline

（和

框阴影

，但此处设置此阴影更多是为了演示）的元素的

不透明度小于1时，就会发生错误。然后

IE 10（至少）切掉盒子阴影，就像设置了“溢出：隐藏”一样
Opera 12.15只在文本的第一行保留方框阴影
用于演示该问题的HTML：

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

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

谢谢


更新。似乎我已经找到了IE的一些解决方法。结果是，我们可以将
框阴影
移到左侧和顶部（在这个bug中它不会裁剪的方向）。为了使元素在视觉上占据相同的空间，可以应用
变换
。它更容易看见

请注意，我们还需要移动（可能使用
translate
）
.inline
的内容。
显示：inline
元素的每一行都隐式地是一个容器。如果将
边框：1px纯黑
应用于文本，则可以看到这方面的证据

因此，浏览器单独渲染每个阴影并不是不合理的，而且（不幸的是）这意味着将它们放置在它前面的元素（读取：行）的顶部

至于为什么“裁剪”只在某些浏览器中出现，而且只有当
不透明度
小于1时才会出现。。。这不是我能回答的问题，因为这取决于浏览器的实现。也就是说。。。据我所知，这种裁剪在技术上是正确的

无论如何，“简单”的解决方法是只将
不透明度
应用于父元素，比如。
我忍不住注意到命名你的
不透明度时的讽刺：.5
规则
。不透明度
。在我这边工作得很好。。。你是否有机会在IE的兼容模式下…你我可以看到Firefox上的裁剪问题-但那是因为框阴影-尝试删除框阴影。。。我认为，由于内联元素上的框阴影，所以应对问题依然存在。@BoltClock，有些讽刺意味=）@Imran Bughio:我很确定这不是他所指的。
将它们放在它前面的元素（读：行）之上
对不起，问题不在这里。问题的第二个代码示例中使用了三个元素，这是由于后续行的阴影导致文本重叠<代码>仅将不透明度应用于父元素
这确实有帮助，但不幸的是，仅部分且仅适用于Opera案例（与框阴影偏移相结合）。无论如何，感谢您在回答中指出这一点，感谢您的描述（我知道行框和内联框是什么，但对于整个图片），感谢您的时间！
.inline{
    display:inline;
    background:red;
    box-shadow:0 0 0 10px red;
}
.inline.opaque{
    opacity:.5;
}

@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;
    }
}