Html 带a<；字段集>；。Firefox vs Chrome

我对Firefox上的CSS有问题。在Chrome上完美渲染的字段集：

在firefox中，它显示如下：

我发现在Firefox上删除CSS顶部字段集边框上方的boxshadow会消失，但是我没有这个阴影。怎么能把他们两个放在一起

代码如下：

<div id="wrapper" style="position: relative;">
        <fieldset style="width: 17em;" class="loginField"><legend align="right">Log in</legend>
        <table cellspacing="0" cellpadding="0" class="loginVerticalPanel" style="height: auto;">
            <tbody>
                <tr>
                    <td align="left" style="vertical-align: top;"><div class="gwt-Label" style="height: auto; width: 100%;">Username:</div></td>
                </tr>
                <tr>
                    <td align="left" style="vertical-align: top;"><input type="text" class="gwt-TextBox" style="height: auto; width: 100%;"></td>
                </tr>
                <tr>
                    <td align="left" style="vertical-align: top;"><div class="gwt-Label" style="height: auto; width: 100%;">Password:</div></td>
                </tr>
                <tr>
                    <td align="left" style="vertical-align: top;"><input type="password" class="gwt-PasswordTextBox" style="height: auto; width: 100%;"></td>
                </tr>
                <tr>
                    <td align="left" style="vertical-align: top;">
                        <table cellspacing="0" cellpadding="0" style="width: 100%;">
                            <tbody>
                                <tr>
                                    <td align="left" style="vertical-align: top;">
                                        <img class="gwt-Image" title="Loading" style="display: none;" alt="Loading" src="assets/square_circles.gif">
                                    </td>
                                    <td align="right" style="vertical-align: top;">
                                        <button type="button" class="loginButton" style="height: 25px;">&gt;&gt;&nbsp;&nbsp;&nbsp;GO</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td align="left" style="vertical-align: top;"><div class="loginWarning" style="display: none; width: 100%;"></div></td>
                </tr>
            </tbody>
        </table>
        </fieldset>
    </div>

---

顺便说一句，这真是太棒了！这肯定是一个未来帮助型的问题

在快速运行中，我发现了一个非常替代的修复方法：

.loginField legend {
    text-align: right;
    background: -webkit-linear-gradient(90deg, #CCCCCC, #FFFFFF) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(90deg, #CCCCCC, #FFFFFF) repeat scroll 0 0 transparent;
    border-radius: 10px 10px 10px 10px;
    -webkit-box-shadow: 0 0 15px #AAAAAA;
    -moz-box-shadow: 0 0 15px #AAAAAA;
    box-shadow: 0 0 15px #AAAAAA;
    padding-right: 1em;
    padding-left: 1em;
    position: absolute;
    margin: -30px 0px 0px 200px;
}

和现场示例：

我修复了一些CSS语法（

：

而不是

；

等等）。我还添加了CSS3语法的

-moz-

和

-webkit-

版本

我会继续挖掘，但这是第一种方法。。它工作得很好，应该比CSS3功能更兼容浏览器。。但是，它会取消图例的放置，您需要使用负边距将其设置回原位。

或者您也可以“浮动”图例，不需要太多的工作来维护布局，尤其是当您有多个字段集时。在提问者的情况下，应该是：

.loginField legend {
    float: right;
    margin-top: -30px;
    background: -webkit-linear-gradient(90deg, #CCCCCC, #FFFFFF) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(90deg, #CCCCCC, #FFFFFF) repeat scroll 0 0 transparent;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 15px #AAAAAA;
    padding-right: 1em;
    padding-left: 1em;
}

---

我所做的是将图例的边距顶部设置为负值，使其看起来与字段集的高度为零；然后我在相反的方向上应用了一个负边距来抵消第一个负边距。然后，我向字段集添加了相等值的填充，以使它们像通常一样定位

fieldset  
{
    padding-top: 14px;
}

fieldset legend  
{    
    margin-top: -14px;
    margin-bottom: -14px;
}

---

TL；DR将图例设置为

位置：绝对

，并应用负上边距将其向上撞回其所在位置。

fieldset  
{
    padding-top: 14px;
}

fieldset legend  
{    
    margin-top: -14px;
    margin-bottom: -14px;
}