Question

我使用以下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的按钮，该按钮等于跨度内的文本。

如何解决此问题？

Answer 1

设置

display: block;

in

.ButtonCenterStyle

TD宽度在Safari浏览器中不起作用

1 个答案: