将元素从 :before/:after 定位到 IE 的边界之外答案

【问题标题】：Positioning an element from :before/:after outside its boundaries in IE将元素从 :before/:after 定位到 IE 的边界之外
【发布时间】：2013-10-09 22:07:38
【问题描述】：

我正在尝试使用:before 或:after 创建一个元素，并将其放置在其父元素的底部，在元素的一半处，以隐藏那里的盒子阴影。这似乎可行，除了 IE。

演示：http://jsfiddle.net/XV6pT/

:before 的白色边框应覆盖底部边框及其框阴影。但是，在 Internet Explorer 中，不显示按钮底部边界以下的元素部分。

没有过滤器或类似的东西可以将某些东西设置为隐藏（根据How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?）。 CSS 按原样复制。

总体目标（也许有人有更好的主意）是，在按钮下方，有一个下拉导航，应该看起来像下拉菜单和按钮是“一个部分”，所以不应该有任何边框或按钮和下拉菜单之间的框阴影。

好像问题出现在IE9和IE10。从绝对定位切换到相对定位也没有帮助。

有什么提示吗？

【问题讨论】：

标签： html internet-explorer css pseudo-element

【解决方案1】：

看看这个：Creating a CSS3 box-shadow on all sides but one

它涉及更多的 html，但 IE 和伪元素会让你发疯。该答案还包括菜单“基线”的阴影，但无需深入研究，我认为可以安全地将其删除。

祝你好运！

【讨论】：