Button IE和mozilla中的按钮布局差异

我一直在测试我在mozilla和IE（7和8）中开发的应用程序。除了IE中的按钮布局外，其他一切都正常工作

在IE中：

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

在Mozilla中：

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

因此，在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>

灰色按钮：

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中正常工作吗？

好的，看看这个

我清理了代码，在两个按钮中添加了一个

.btn

类，以稍微统一样式，并且大部分情况下，我从表中删除了不必要的第二个单元格。基本上，你的桌子在IE中伸展，导致按钮支架（td）为宽度的50%，造成很大的间隙。一般来说，我认为你应该考虑把桌子作为按钮的持有人，但这与这个问题无关。不过，简单的div就可以了

不管怎样，给你。如果您有更多问题，请随时提问：）

.btn{
字体大小：粗体；
字体大小：13px；
高度：30px；
宽度：100px；
保证金：10px 10px 10px 0；
文本对齐：居中；
浮动：左；
显示：块；
}
input.btn-red{
背景：url（“https://www.mySite.com/images/red_btn.gif）重复-x滚动中心底部#D02727；
边框：2px实心#CE6268；
颜色：#FFFFFF；
}
a、 灰色{
背景：url（“https://www.mySite.com/images/gray_btn.gif）重复-x滚动中心底部#B7BDB5；
颜色：#000000；
文字装饰：无；
线高：30px；
}

您的css中与

btn red

和

btn gray

类相关的内容是什么？最好是制作一个JSFIDLE，这样可以更容易地测试所有内容。@PetrČihula:好的，我将用样式编辑问题。@PetrČihula:我已经添加了样式。@PetrČihula:这是JSFIDLE:谢谢，我会检查这一个，然后回复给你。这很完美，布局很完美，只是“继续”按钮的尺寸更大，但这不是我不能处理的。然而，事情必须如此。明亮的投票表决通过。