帶有輪廓和僞元素的Firefox中的奇怪行爲

Question

當您將輪廓元素和僞元素組合在一起時，Firefox的行爲與Chrome和Safari（我沒有測試過其他瀏覽器）的行爲不同。 有沒有辦法解決它或這是一個錯誤？

.main { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 10px auto; 
 
    border: 2px solid #f00; 
 
    outline: 2px solid #00f; 
 
} 
 
.main:after { 
 
    content: 'Hello'; 
 
    position: absolute; 
 
    width: 100px; 
 
    text-align: center; 
 
    bottom: -50px; 
 
} 
 
.wtf { 
 
    width: 400px; 
 
    margin: 90px auto; 
 
}

<div class="main"></div> 
 
<div class="wtf"> 
 
    <p>In Chrome and Safari the 'Hello' is outside of the outline.</p> 
 
    <p>In firefox the outline is extended and the 'Hello' is inside the outline. Bug from Firefox or is there a way to fix this?</p> 
 
</div>

演示：http://codepen.io/romainberger/pen/nuxlh

編輯： 測試在Firefox 20.0，鉻28和Safari 5.1

Answer 1

現在用於

框陰影

因爲這樣

.main { 
    position: relative; 
    width: 100px; 
    z-index:1; 
    height: 100px; 
    margin: 10px auto; 
    border: 2px solid #f00; 
    box-shadow:0px 0px 0px 3px #00f; 
} 
.main:after { 
    content: 'Hello'; 
    position: absolute; 
    text-align: center; 
    bottom: -50px; 
    left:0; 
    right:0; 
    z-index:2; 
} 

.wtf { 
    width: 400px; 
    margin: 90px auto; 
} 

Demo

Answer 2

無需使用的z-index。

.main { 
    position: relative; 
    width: 100px; 
    height: 100px; 
    margin: 10px auto; 
    border: 2px solid #f00; 
    box-shadow:0px 0px 0px 3px #00f; 
} 
.main:after { 
    content: 'Hello'; 
    position: absolute; 
    text-align: center; 
    bottom: -50px; 
    left:0; 
    right:0; 
} 

.wtf { 
    width: 400px; 
    margin: 90px auto; 
}