9

ヘッダーとテーブル本体を備えた単純なテーブルがあります。すべてのセルは固定幅であると想定されており、1 つだけが可変 (名前など) です。

可変幅のセルで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 と demo を確認してください。

このテーブルをすべてのブラウザーで同じように動作させようとしていますが、Safari では box-sizing: border-box が無視されるようです。この回答によると、古いバージョンの Safari のバグを修正する必要があります。

Chrome では次のように表示されます。 ここに画像の説明を入力

Safari 6.0.3 では次のように表示されます。 ここに画像の説明を入力

この問題は、私がテストしたすべての新しい Safari for Mac でも発生します。1 週間前に新旧両方の Safari でテストしたところ、問題なく動作したことはほぼ確実です。どうやら、新しい Safari に突然新しい種類のバグが発生したようなものです。

Safari バージョン 6.0.3 (7536.28.10) を使用しています。古い Safari バージョン 5.0.5 (6533.21.1、6533.21) は正常に動作しているようです。

みんな、気が狂う前に助けて！ここで何か間違ったことをしていますか、それとも本当にバグですか?

4

5 に答える 5

2

より良いアプローチは、テーブルを完全に削除して CSS を使用することですが、それが不可能な場合は、サファリにのみ影響するテーブルにブラウザー固有の CSS を試すことをお勧めします。

jqueryコード

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

そしてあなたのCSSで

.saf table
{
// any adjustments required
}

ただし、このアプローチを使用する場合は、少なくともテーブルに ID を付けることをお勧めします。StackOverflowで見つけたので、このアプローチの功績を主張することはできませんが、ブラウザー固有のハックがいくつか必要な場合にのみ使用します

アップデート

$.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>
于 2013-04-10T08:59:07.123 に答える
1

列幅をインラインで指定してください。ただし、1 行のみにしてください。例えば： 

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

ここにデモがあります。

私のサファリ5.1.7（7534.57.2）では、あなたのコードはうまく機能しています...そして私のものも...

于 2013-04-10T06:40:45.983 に答える
1

これは、質問にいくつかの光を当てる必要があります。box-sizing表のセルで使用すると、Safari 6 では機能しなくなったようです。

于 2013-04-10T07:42:55.873 に答える