html - 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 .

我试图让这个表格在所有浏览器中的行为都相同，但似乎 box-sizing: 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，它只影响 safari

jquery代码

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

然后在你的CSS中

.saf table
{
// any adjustments required
}

尽管如果使用这种方法，我建议至少在表中提供一个 id。我不能声称这种方法是我在 StackOverflow 上发现的，但当我只需要一些浏览器特定的 hack 时，它就是我使用的方法

更新

Just encase 任何偶然发现此错误的人，正如下面的评论中所指出的，$.browser 已在 jquery 的 1.9 版中删除，因此替代方法是使用 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>