1

我正在使用下面的 HTML 代码在 ASP.Net 中呈现按钮

<table onclick=""
    title="Add New" 
    cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse;
    float: left; cursor: pointer; ">
    <tbody>
        <tr>
            <td class="ButtonLeftStyle">
            </td>
            <td class="ButtonCenterStyle" >
                <span class="ButtonTextStyle">Add New</span>
            </td>
            <td class="ButtonRightStyle">
            </td>
        </tr>
    </tbody>
</table>

我在这个按钮上使用下面的 CSS 类

.ButtonLeftStyle
{
    width: 1px;

}

.ButtonRightStyle
{
    width: 1px;

}

.ButtonCenterStyle
{

    background:url(Images/imgButton/GenericButton_Link.gif) repeat 0 -1px transparent;
    width: 120px;
    border: 1px solid #77A2B5;
    border-collapse: collapse;
    color: #000000;
    display: inline;
    font-family: Tahoma,Arial,Verdana,Sans-Serif;
    font-size: 11px;
    line-height: 13px;
    text-align: left;
    text-decoration: none;
    vertical-align: middle;
    white-space: nowrap;
    cursor: hand;
    text-indent:25px;
    height: 18px;

}

TD.ButtonCenterStyle:hover
{
    background:url(Images/imgButton/GenericButton_Hover.gif) repeat 0 -1px transparent;   
    width: 120px; 
    border:1px solid #cccccc;
    border-collapse: collapse;
    color: #666666;
    display: block;
    font-family: Tahoma,Arial,Verdana,Sans-Serif;
    font-size: 11px;
    line-height: 13px;
    text-align: left;
    text-decoration: none;
    vertical-align: middle;
    white-space: nowrap;
    cursor: hand;
    text-indent:25px;
    height: 18px;
}

.ButtonTextStyle
{
    font-size: 10px;
    font-family: Tahoma,Arial,Verdana,Sans-Serif;
}

如果我们计算表格的宽度，那么它必须为 124px，这在 IE8、9 和 Firefox 中是正确的，但在 Safari 中失败。Safari 渲染按钮的宽度 = 46px，等于 span 内的文本。

我该如何解决这个问题？

4

1 回答 1

2

放

display: block;

在

.ButtonCenterStyle
于 2012-10-03T14:04:47.420 回答