css - Firefox 的 CSS 修复：Box shadow 属性

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

您问题的阴影部分是

带有 <fieldset> 的框阴影 CSS。火狐与 Chrome

不是最好的解决方案，因为你必须有一个固定的高度和宽度，<legend>但添加它可以工作

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

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