Firefox的CSS修復：箱陰影財產

這是我的CSS代碼：Firefox的CSS修復：箱陰影財產

.thzPartsHeader, .thzPartsContainer { 
    border:1px solid #0080ff; 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
    border-radius: 8px; 
    -webkit-box-shadow:0 0 6px #0080ff, 0 0 20px #292929 inset; 
    -moz-box-shadow:0 0 6px #0080ff, 0 0 20px #292929 inset; 
    box-shadow:0 0 6px #0080ff, 0 0 20px #292929 inset; 
    padding: 5px 20px 5px 20px; 
    margin:auto; 

    font-family:georgia; 
    font-size: 12px; 
    color:#ffffff; 
    background-color:#000000; 
}

這是HTML代碼：

<fieldset class="thzPartsContainer"> 
    <legend class="thzPartsHeader"><b>Code Will Appear Below</b></legend> 
    <textarea class="textArea" id="txtarea" name="codearea"></textarea> 
</fieldset>

這是怎麼出現在谷歌瀏覽器（這正是我想）：

但是，這是它如何出現在Firefox（沒有信譽爲p ost圖像：o）：

它看起來好像陰影被移動和margin:auto屬性不工作在Firefox中。他們兩人的解決方案是什麼？請幫忙。

http://jsfiddle.net/f2ndc/

來源

2013-03-07 Hasan

傳奇很難一致呈現。你可能會想用標準的div代替。參見：http://stackoverflow.com/questions/2702422/i-want-to-have-some-cross-browser-consistency-on-my-fieldsets-do-you-know-how-c和http：// stackoverflow.com和http://stackoverflow.com/questions/5937508/why-does-firefox-4-absolutely-position-fieldset-legends-differently-than-other-b/questions/3973456/default-css-values- for-a-fieldset-legend – isherwood 2013-03-07 21:36:57

你的問題的陰影部分是

Box shadow CSS with a <fieldset>. Firefox vs Chrome

重複的事情並不是你必須有對<legend>一個固定的高度和寬度，但增加，這可能的最佳解決方案工作

.thzPartsHeader{ 
    position: absolute; 
    top: -9px; 
    left: 50%; 
    margin-left: -75px; 
} 
.thzPartsContainer{ 
    padding-top: 9px; 
    position: relative; 
}

小提琴：http://jsfiddle.net/FBca7/2/

來源

2013-03-07 21:48:00 JoeyP

謝謝！ :)所以問題實際上是與傳說！ – Hasan 2013-03-07 21:57:29

Firefox的CSS修復：箱陰影財產

回答

相關問題