IE8和IE9：之前和之後：元素位置絕對隱藏後

我試圖創建一個帶有「大寫字母」兩端和重複背景的按鈕，以保持按鈕靈活的大小。IE8和IE9：之前和之後：元素位置絕對隱藏後

爲了做到這一點，我已經使用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工作，並創建了一個變通辦法不影響這個問題。

來源

2012-06-22 allicarn

你知道嗎[jsfiddle也理解scss]（http://jsfiddle.net/sg3s/Dqr76/）？（請填寫我的jsfiddle示例，以便人們可以與代碼混合在一起） – sg3s

感謝您指出這一點！我用一些虛擬圖像更新了它，並在上面添加了一個鏈接 – allicarn

我們仍然需要jsfiddle生成的新url：p – sg3s

將overflow: visible;添加到按鈕元素，並顯示出來。在此演示jsFiddle

我發誓我已經試過，但我猜不是。 Thanks to this question

來源

2012-06-25 13:14:58 allicarn

像老闆一樣解決你自己的問題。 :) +1 – sg3s

IE8和IE9：之前和之後：元素位置絕對隱藏後

回答

相關問題