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修复：箱阴影财产

回答

相关问题