IE8 和 IE9 :before 和 :after 元素绝对位置被隐藏答案

【问题标题】：IE8 and IE9 :before and :after elements position absolute are hiddenIE8 和 IE9 :before 和 :after 元素绝对位置被隐藏
【发布时间】：2012-06-22 21:54:04
【问题描述】：

我正在尝试创建一个两端都带有“大写字母”和重复背景的按钮，以使按钮保持灵活的大小。

为了做到这一点，我在 CSS 中使用了 :before 和 :after 伪元素，以及 position:absolute 将其置于主按钮的背景覆盖空间之外（使用负值）。

它在 FF 和 Chrome 中工作，但在 IE8 和 9 中看起来，图像在那里，但在按钮“外部”，因此是隐藏的。有谁知道如何将这些伪元素“弹出”按钮，以便它们呈现？

我想将 HTML 只是 <button></button> 元素保留，并且我正在使用 SASS。你可以在这里看到一个 jsFiddle：http://jsfiddle.net/Dqr76/8/ 或下面的代码：

button {
    display: inline-block;
    zoom: 1;
    *display: inline;
    border:0;
    background-image: url(../images/btn_bg.png);
    background-repeat: repeat-x;
    color: #fff;
    font-weight: bold;
    height: 22px;
    line-height: 22px;
    position: relative;
    margin: 0 5px;
    vertical-align: top;

    &:before {
        display: inline-block;
        height: 22px;
        background-image: url(../images/btn_left.png);
        width: 5px;
        position: absolute;
        left: -5px;
        top: 0;
        content: "";
    }

    &:after {
        display: inline-block;
        height: 22px;
        background-image: url(../images/btn_right.png);
        width: 5px;
        position: absolute;
        right: -5px;
        top: 0;
        content: "";
    }
}

只是一个旁注，在有人提出之前，我知道这些伪元素在 p>

【问题讨论】：

你知道jsfiddle also understands scss吗？（请完成我的 jsfiddle 示例，以便人们可以乱用代码）
感谢您指出这一点！我用一些虚拟图像更新了它并在上面添加了一个链接
我们仍然需要 jsfiddle 生成的新 url :p
你说你知道 IE7 及以下不知道伪元素，但你的这些元素的 CSS 包含一堆 IE7 的 hack (*display:inline,zooms)。您可以删除这些以增加清洁度。
我删除了它们 - 谢谢！

标签： internet-explorer-8 internet-explorer-9 css-position pseudo-element

【解决方案1】：

将overflow: visible; 添加到按钮元素，它就会显示出来。在此jsFiddle

进行了演示

我发誓我已经尝试过了，但我想没有。 Thanks to this question

【讨论】：

像老板一样解决自己的问题。 :) +1