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