Firefox 的 CSS 修复 : Box shadow property

Question

这是我的 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>

这是它在 Google Chrome 中的显示方式(这正是我想要的):

但这就是它在 Firefox 中的显示方式(没有发布图像的声誉 :o ):
_{(来源:googledrive.com)}

看起来好像阴影被置换了，margin:auto 属性在 firefox 中不起作用。他们两个的修复方法是什么？请帮忙。

http://jsfiddle.net/f2ndc/

Answer 1

你问题的阴影部分是

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

fiddle :http://jsfiddle.net/FBca7/2/