11

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

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

只是一个旁注，在有人提出之前，我知道这些伪元素在 < IE8 中不起作用，并且已经创建了一个不影响这个问题的解决方法。

4

1 回答 1

17

添加overflow: visible;到按钮元素，它就会显示出来。在这个jsFiddle上演示

我发誓我已经试过了，但我想没有。 感谢这个问题

于 2012-06-25T13:14:58.543 回答