CSS：'table-layout：fixed'和Safari中單元格的邊框大小

Question

我有一個簡單的表格，帶有表頭和表格主體。所有單元都應該是固定寬度，只有一個是可變的（例如名稱）。

我需要table-layout: fixed才能在可變寬度單元上使用text-overflow: ellipsis。

這裏的表的CSS：

table { 
    width: 550px; 
    border: 1px solid #AAA; 
    table-layout: fixed; 
    border-collapse: collapse; 
} 
table td, table th { 
    border: 1px solid #DDD; 
    text-align: left; 
    padding: 5px 15px 5px 15px; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 
.one { 
    width: 60px; 
} 
.two { 
    width: auto; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: nowrap; 
} 
.three, .four, .five { 
    width: 90px; 
} 

檢查HTML, along with a demo。

我試圖讓這個表在所有瀏覽器中都表現相同，但似乎框的大小：border-box在Safari中被忽略。雖然根據this answer，它應該是一個修復老版本的Safari中的錯誤。

這裏是它的外觀在Chrome：

而且它的外觀在Safari 6.0.3：

這個問題也存在於爲Mac所有新的Safari瀏覽器，我測試。我幾乎可以肯定，我在一週前使用Safari進行了測試，無論是新舊版本，它都運行良好。它以某種方式像新的Safari突然得到一種新的錯誤。

我使用的是Safari版本6.0.3（7536.28.10）。舊Safari版本5.0.5（6533.21.1,6533.21）似乎工作正常。

人們，在發瘋前幫助我！我在這裏做錯了什麼，或者它確實是一個錯誤？

Answer 1

一個更好的方法是完全刪除該表，並使用CSS，但如果這是不可能的，我建議試圖對錶中的某些特定瀏覽器CSS隻影響野生動物園

jQuery代碼

if ($.browser.safari) { 
       $("html").addClass("saf"); 
      }; 

，然後在你的CSS

.saf table 
{ 
// any adjustments required 
} 

但如果使用這種方法我想至少表明在桌子上的ID。我不能居功這種方法，因爲我發現它在計算器上，但它是我用的時候，我只需要幾個特定瀏覽器黑客

更新

剛剛包住人絆倒在這個錯誤，因爲在指出低於$ .browser評論已在jQuery的1.9版本中移除，從而替代是如果你要設置的width: auto;即寬度可變使用modernizr.js和使用的代碼像下面

<script type="text/javascript">        
    $(document).ready(function() { 

     Modernizr.addTest('ff', function() { 
      return !!navigator.userAgent.match(/firefox/i); 
     }); 
     Modernizr.addTest('gc', function() { 
      return !!navigator.userAgent.match(/chrome/i); 
     }); 
     Modernizr.addTest('saf', function() { 
      return !!navigator.userAgent.match(/safari/i); 
     });  
     Modernizr.addTest('op', function() { 
      return !!navigator.userAgent.match(/opera/i); 
     }); 
    })   
</script> 

Answer 2

剛剛嘗試這一塊， 可以使用：

<table width="100%" cellspacing="0"> 
<colgroup> 
<col width="specific width of the column 1"/> 
<col width="specific width of the column 2"/> 
and so on 
</colgroup> 
<thead> 
</thead> 
<tbody> 
</tbody> 
</table> 

Answer 3

儘量給列寬行內，但只有在一排！例如：

<table> 
<thead> 
    <tr> 
     <th class="one" width="60">One</th> 
     <th class="two">Two</th> 
     <th class="three" width="90">Three</th> 
     <th class="four" width="90">Four</th> 
     <th class="five" width="90">Five</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td class="one">1</td> 
     <td class="two">Text that could be too long for this column and it should be truncated.</td> 
     <td class="three">3</td> 
     <td class="four">4</td> 
     <td class="five">5</td> 
    </tr> 
    <tr> 
     ... 
    </tr> 
</tbody> 

這裏有一個demo。

在我的Safari 5.1.7（7534.57.2）你的代碼工作就好了... ...和我的太...

Answer 4

This應該提供一些線索的問題。在表格單元格中使用時，似乎box-sizing不再適用於Safari 6。

Answer 5

，然後根據自己的考慮哪一行可以設置這個。一行可能是100px，另一行可能是該列的300px，那麼執行此操作很重要的是哪一行？你顯然對此感到困惑。就像瀏覽器混淆了應該應用哪一行width: auto;。一些瀏覽器根據其標題設置了它，一些根據其行內容設置了它。所以你必須設置寬度在任何瀏覽器中表現相同。

您需要聲明列的寬度，以便在任何瀏覽器中修復。所以我剛剛在.two選擇器中添加了width: 60px;。

見This Fiddle

注：如果只是在Safari中的問題，然後添加width: inherit;您.two選擇。它工作正常。