CSS：“表格布局：固定”和 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 时，我就使用它

更新

只要封装任何偶然发现此错误的人，正如下面的评论中所指出的，$.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>

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

如果你想设置width: auto; 即可变宽度，那么请考虑你自己根据哪一行可以设置这个。一行可能是 100px，另一行可能是该列的 300px，那么哪一行是重要的呢？你显然对此感到困惑。就像浏览器混淆了应该应用哪一行width: auto;。一些浏览器根据它的标题和一些根据它的行内容设置它。因此，您必须将宽度设置为在任何浏览器中的行为都相同。

您需要声明列的宽度，以便在任何浏览器中都可以修复它。所以我刚刚在您的.two 选择器中添加了width: 60px;。

见This Fiddle

注意：如果只是 safari 中的问题，请将 width: inherit; 添加到您的 .two 选择器中。它工作正常。

Answer 5

This 应该对这个问题有所了解。在表格单元格中使用时，box-sizing 似乎在 Safari 6 中不再起作用。