IE8和IE9：before和：after元素位置绝对隐藏 [英] IE8 and IE9 :before and :after elements position absolute are hidden

问题描述

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

为了做到这一点，我使用了：在之前和：之后 CSS中的伪元素，以及 position：absolute ，使其超出主按钮的背景覆盖空间（使用负值）。

它适用于FF和Chrome，但它看起来像在IE8和9中，图像在那里，但是在按钮之外，因此被隐藏。有没有人知道如何将这些伪元素弹出按钮，以便它们呈现？

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

 按钮{
 display：inline-block; 
 zoom：1; 
 *显示：内联; 
 border：0; 
 background-image：url（../ images / btn_bg.png）; 
 background-repeat：repeat-x; 
 color：#fff; 
 font-weight：bold; 
身高：22px; 
 line-height：22px; 
头寸：相对; 
保证金：0 5px; 
 vertical-align：top; 
 
&：{
 display：inline-block; 
身高：22px; 
 background-image：url（../ images / btn_left.png）; 
宽度：5px; 
仓位：绝对; 
剩余：-5px; 
 top：0; 
内容：; 
} 
 
&：{
 display：inline-block; 
身高：22px; 
 background-image：url（../ images / btn_right.png）; 
宽度：5px; 
仓位：绝对; 
右：-5px; 
 top：0; 
内容：; 
} 
} 
  

只是一个旁注，才有人带来它我知道这些伪元素不适用于< IE8，并且已经创建了一个不会影响这个问题的变通方法。

解决方案

添加 overflow：visible; 到按钮元素，然后显示出来。
在此 jsFiddle 上展示

<我发誓我已经尝试过了，但我猜不是。 感谢此问题

I am trying to create a button with "caps" on either end, and a repeating background, in order to keep the button a flexible size.

In order to do this, I have used the :before and :after pseudo-elements in CSS, along with position:absolute to get it outside of the main button's background-covered space (using negative values).

It works in FF and Chrome, but it looks like in IE8 and 9, the images are there, but are "outside" the button, and therefore are hidden. Does anyone know how to pop these pseudo-elements "out" of the button, so that they will render?

I want to keep the HTML to just the <button></button> element, and am using SASS. You can see a jsFiddle here: http://jsfiddle.net/Dqr76/8/ or the code below:

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: "";
    }
}

Just a sidenote, before someone brings it up, I know that these pseudo-elements do not work in < IE8, and have created a work-around that is not effecting this problem.

解决方案

Add overflow: visible; to the button element, and it shows up. Demonstrated at this jsFiddle

I swear I tried that already, but I guess not. Thanks to this question

这篇关于IE8和IE9：before和：after元素位置绝对隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！