Question

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

为了做到这一点，我使用了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: "";
    }
}

只是一个旁注，在有人提出之前，我知道这些伪元素在＆lt; IE8，已经创建了一个不会影响这个问题的变通方法。

Answer 1

将overflow: visible;添加到按钮元素，然后显示。在此jsFiddle

展示我发誓我已经尝试过了，但我猜不是。 Thanks to this question

IE8和IE9：before和：after元素位置绝对隐藏

1 个答案: