2012-10-03 110 views
1

我在ASP.Net渲染按鈕使用HTML代碼如下TD寬度不Safari瀏覽器

<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的按鈕,該寬度等於跨度內的文本。

我該如何解決這個問題?

+0

使用表,TD,和跨度創建一個按鈕,是不是在所有適當的HTML,你要去體驗呈現問題自然是因爲你要求瀏覽器以某種不適合的方式呈現某些東西。是否有一個原因,你用一個表來做到這一點,而不是一個按鈕或錨標籤? –

+0

該按鈕被自動通過控制其存在於傳統的DLL的一個呈現。我不能要求客戶取代。所以我必須在上面的HTML的邊界內解決這個問題 – Sachin

回答

1

display: block; 

.ButtonCenterStyle 
相關問題