0

我一直在测试我在 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 中正常工作的方法吗？

4

1 回答 1

1

好的，看看这个。http://jsfiddle.net/9QEGU/4/

我清理了代码，.btn为两个按钮添加了一个类以统一样式，主要是，我从你的表中删除了第二个单元格，这是不必要的。基本上，您的表格在 IE 中伸展，导致按钮架 (td) 为宽度的 50%，从而导致较大的间隙。一般来说，我认为你应该考虑将表作为按钮的持有者，但这与这个问题无关。不过，简单的 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;
}
于 2013-06-13T14:21:03.413 回答