表格標題出現在某些瀏覽器的外部輪廓內，其他人在外部

我在表格中放置了邊框和輪廓。它在最新的IE和FF中運行良好，但Chrome瀏覽器也將標題放在了我的標題上。在IE和FF中，輪廓僅顯示在桌子周圍，這正是我想要的。如何在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; 
}

來源

2013-03-26 MShack

你有它看起來像你的形象？對我來說似乎很好 – chriz 2013-03-26 14:03:34

這會影響Chrome，Safari和Opera。 – 2013-03-26 14:13:35

表格標題應該出現在表格輪廓的內部還是外部的決定似乎留給了各個瀏覽器來選擇。它似乎是非常一致的每個瀏覽器雖然，並且合理的任何方式。就個人而言，我認爲在大綱內部有標題是比較合適的，因爲標題是表格的一部分。 – 2013-03-26 16:22:07

你需要採取outline並將其移動到tbody。大綱用於顯示關注元素，整個元素。 Chrome瀏覽器將整個元素視爲table，其中caption是其中的一個子元素，因此它將大綱放在所有元素中。

從您的報告等級中刪除outline，並向tbody添加一個新的班級或新的樣式來設置大綱。

編輯

添加在display:block;，似乎解決它。

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

或者你可以擺脫表一起，並在這撥弄使用div的，如：

非臺版：http://jsfiddle.net/R7aTq/130/

來源

2013-03-26 13:58:57

造型是不一樣的。輪廓和背景顏色（輪廓內的白色邊框）之間不再有2像素的間距。 – 2013-03-26 14:39:15

thx，我在發帖前嘗試過tbody並且沒有在Chrome中工作 – MShack 2013-03-26 14:44:39

Jake再次嘗試重試，它現在在Chrome中運行，但在FF和IE中留下了較大的輪廓http://jsfiddle.net/R7aTq/80/ – MShack 2013-03-26 14:54:18

表格標題出現在某些瀏覽器的外部輪廓內，其他人在外部

回答

相關問題