针对firefox的CSS修复：Box阴影属性

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）：

好像阴影被移位并且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;
}

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