html - Safari ブラウザーで TD 幅が機能しない

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;

の

.ButtonCenterStyle