3

テーブルの周りにボーダーとアウトラインを配置しています。最新の IE と Firefox では問題なく動作しますが、Chrome ではキャプションの周りにもアウトラインが表示されます。IE と Firefox では、アウトラインはテーブルの周りにのみ表示されます。これは私が望むものです。Chromeでこれを修正するにはどうすればよいですか?

デモ: http://jsfiddle.net/R7aTq/17/

HTML

<table align="center" cellspacing="1" class="homepagemodule  report" id="trades">
    <caption><span>Pending Trades</span></caption>
    <tbody>
        <tr>
            <th>Currently Outstanding Trades</th>
        </tr>
        <tr class="oddtablerow">
            <td>
                <ul>
                    <li>0 trades proposed by me to others</li>
                    <li>0 trades proposed by others to me</li>
                    <li><a href="http://football21.myfantasyleague.com/2013/options?L=56019&amp;O=05">View trades now</a></li>
                </ul>
            </td>
        </tr>
    </tbody>
</table>

CSS

テーブル キャプションは、一部のブラウザではアウトラインの内側に表示され、他のブラウザでは外側に表示されます。

caption {
    color: #333;
    font-weight: 400;
    font-size: 12pt;
    background: none;
    text-align: center;
}
.report {
    width: 300px;
    background: #ccc;
    border: 2px solid #fff;
    outline: 1px solid #000;
}
4

1 に答える 1

1

outlineを取得してに移動する必要がありますtbody。アウトラインは、要素、つまり要素全体にフォーカスを当てるために使用されます。Chrome は要素全体tableをcaptionの子であると見なすため、そのすべてにアウトラインを配置します。

レポート クラスから削除し、アウトラインを設定outlineする新しいクラスまたは新しいスタイルを追加します。tbody

編集

それを追加すると、display:block;それが修正されるようです。

証明を更新しました: http://jsfiddle.net/R7aTq/83/

または、テーブルをすべてまとめて削除し、このフィドルのように div を使用することもできます。

テーブル以外のバージョン: http://jsfiddle.net/R7aTq/130/

于 2013-03-26T13:58:57.800 に答える