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选择。它工作正常。