Question

我在桌子周围放置边框和轮廓。它在最新的IE和Firefox中运行良好，但Chrome也在我的字幕周围加上轮廓。在IE和Firefox中，大纲只显示在表格周围，这就是我想要的。如何在Chrome中修复此问题？

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

Answer 1

您需要使用outline并将其移至tbody。 Outline用于显示对元素，整个元素的关注。 Chrome将整个元素视为table，caption是其中的一个子元素，因此它将轮廓围绕所有元素。

从报告类中删除outline，并为设置大纲的tbody添加新类或新样式。

修改

添加似乎可以修复它的display:block;。

更新证明：http://jsfiddle.net/R7aTq/83/

或者你可以一起摆脱桌子并使用像这个小提琴中的div：

非桌面版：http://jsfiddle.net/R7aTq/130/

表格标题出现在某些浏览器的大纲内部，在其他浏览器之外

1 个答案: