IE和Mozilla中的按钮布局差异

Question

我一直在测试我在mozilla和IE（7和8）中开发的应用程序。一切都有效，除了IE中的按钮布局。

在IE中：

在Mozilla中：

所以在mozilla中，它按预期工作，但在IE中分手了。

我正在使用以下代码来渲染按钮：

<tr style="display:block;">
    <td align="left">
       <input type="submit" name="Continue" value="Continue" class="btn-red" style="height: 2.0em; width: 95px; font-size: 13px; cursor: pointer;" />
    </td>
    <td align="left">
    <a href="#" class="btn-gray" style="height: 1.1em;">Cancel</a>
    </td>
</tr>

编辑：

CSS：

红色按钮：

input.btn-red {
    background: url("https://www.mySite.com/images/red_btn.gif") repeat-x scroll center bottom #D02727;
    border: 2px solid #CE6268;
    color: #FFFFFF;
    display: block;
    font-weight: bold;
    height: auto;
    margin: 10px 10px 10px 0;
    padding: 4px 30px 0.5em;
    text-align: center;
    text-decoration: none;
    width: auto;
}

灰色按钮：

a.btn-gray {
    background: url("https://www.mySite.com/images/gray_btn.gif") repeat-x scroll center bottom #B7BDB5;
    border: 2px solid #B2B8B1;
    color: #000000;
    float: left;
    font-size: 13px;
    font-weight: bold;
    margin: 10px 10px 10px 0;
    padding: 4px 30px;
    text-align: center;
    text-decoration: none;
    width: 40px;
}

任何人都可以建议一种方法让它在IE中正常运行吗？

Answer 1

好的，请检查一下。 http://jsfiddle.net/9QEGU/4/

我有点清理了代码，在你的按钮上添加了一个.btn类来统一样式，主要是，我从你的桌子上移除了第二个单元格，这是不必要的。基本上你的桌子在IE中伸展，导致按钮架（td）为宽度的50％，造成很大的差距。一般来说，我认为您应该考虑使用avoding table作为按钮的持有者，但这与此问题无关。尽管如此，简单的div也可以做到这一点！

无论如何，这里是。如果您有更多问题，请随时询问：）

<table>
<tr>
    <td align="left">
       <input type="submit" name="Continue" value="Continue" class="btn btn-red" />
        <a href="#" class="btn btn-gray">Cancel</a>
    </td>
</tr>
</table>

.btn {
    font-weight: bold;
    font-size: 13px;
    height: 30px;
    width:100px;
    margin: 10px 10px 10px 0;
    text-align: center;
    float:left;
    display:block;
}

input.btn-red {
    background: url("https://www.mySite.com/images/red_btn.gif") repeat-x scroll center bottom #D02727;
    border: 2px solid #CE6268;
    color: #FFFFFF;
}

a.btn-gray {
    background: url("https://www.mySite.com/images/gray_btn.gif") repeat-x scroll center bottom #B7BDB5;
    color: #000000;
    text-decoration: none;
    line-height:30px;
}