CSS輪廓總是對鉻

第一個錶行的谷歌瀏覽器，當你有一個錶行大綱你得到它僅在第一行CSS輪廓總是對鉻

所以使用這個CSS：

tr { 
     outline:1px solid red; 
    }

你會得到僅在第一行的輪廓，你可以看到，如果你在Chrome中打開此鏈接：

http://jsbin.com/enupey/27/edit

有人知道這方面的任何解決方法/修復？

謝謝

來源

2012-08-11 Omu

看起來像我的錯誤，http://code.google.com/p/chromium/issues/detail ？id = 81373，但如果我記得正確的話，由於瀏覽器的樣式限制，你不應該依賴'tr'的樣式。 – 2012-08-11 18:53:44

雖然這似乎是一個錯誤，有點谷歌上搜索，我發現了一個有效的解決方案作爲this question

部分添加：

display: block;

似乎工作：

tr 
{ 
    outline:1px solid red; 
    display: block; 
}

編輯結果可見here

我用CSS多一點擺弄周圍，並用此來了：

td 
{ 
    border-top:1px solid red; 
    border-bottom:1px solid red; 
    bottom-padding:-1px; 
} 

table 
{ 
    border-left:2px solid red; 
    border-right:2px solid red; 
    border-top:1px solid red; 
    border-bottom:1px solid red; 
    bottom-padding:-1px; 
}

那會是合適的？

警告：我只在Google Chrome for Mac上測試過。

來源

2012-08-11 18:52:22

確實有效，但它會破壞表格佈局（如果您有表格標籤的寬度，則會引起注意） – Omu 2012-08-11 18:56:28

已編輯的答案。主要區別在於我使用了邊框而不是輪廓。 – 2012-08-11 19:09:57

添加'display：block'就足夠了，因爲我測試了 – UnLoCo 2012-08-13 21:10:36

table tag has a rules attribute它允許您定義邊界在表格中的位置。但是，請注意：

規則屬性在所有主流瀏覽器中都受支持。

注：規則屬性，IE不支持，以前的版本9

注：Chrome和Safari瀏覽器顯示該屬性錯誤：他們補充受影響的境外除內部邊界。

與你原來的問題的frame attribute和CSS結合這一點，這提供了在每行盒裝輪廓：

<table rules="rows" frame="box">

Outcome

你可以看到這個修正案JSBin here

（在Mac Chrome上測試）

（我已經添加了這個作爲一個單獨的答案，因爲我以前的答案集中在CSS，這種解決方案，只使用HTML似乎明顯分開答案）

來源

2012-08-13 22:36:29

根據MDN上的表格頁（https://developer.mozilla.org/en-US/docs/HTML/Element/table），'rules'屬性已棄用。此外，請參閱http://w3fools.com/ – thirdender 2012-08-13 22:45:41

第一頁也說不使用

標籤，但問題的特點。 – 2012-08-13 22:51:40

在頁面顯示時，不鼓勵使用用於佈局目的的'TABLE'標籤。在語義HTML理論中，表格用於顯示錶格數據（數字，數字），並且出於這個原因使用它們是非常好的/鼓勵的。這個問題沒有明確說明目的是否用於表格數據，但'rules'屬性仍然被棄用。 – thirdender 2012-08-13 22:57:45

這不是一個完美的答案有幾個原因，但我把它扔在那裏作爲一個選項...在TABLE元素上設置border-collapse: collapse;，並在每行的TD和TH元素周圍設置樣式邊界。最終輸出見this JSBin。由於它依賴於border-collapse，因此在IE6/7中沒有附加的cellspacingHTML屬性將無法正常工作。如果你想單獨勾畫每一行，它也可能不會達到你想要的效果。解決方案還取決於使用:first-child和:last-child僞選擇器，而IE8不支持:last-child。這可以通過在某些元素上添加「first」和「last」作爲類來解決，但這並不理想。

來源

2012-08-13 23:20:33 thirdender

這可以作爲證明here，不，我相信，任何重大的副作用：

tr 
{ 
    display: table-row-group; 
    outline:1px solid red; 
}

來源

2012-08-13 23:22:12 ScottS

有副作用http://jsbin.com/enupey/23/edit – Omu 2012-08-14 22:04:08

您可以使用類似的代碼如下。

爲表中的HTML代碼

<table rules='none'> 

</table>

和更改CSS與

tr.sel 
{ 
    border:1px solid red; 
}

，它將使在中間原料的邊界在任何瀏覽器。

來源

2012-08-16 14:30:52

隨着display: block你可以這樣做：

HTML：

<table> 
    <tr> 
    <td>ads</td> 
    <td>azx</td> 
    <td>bbb</td> 
    </tr> 
    <tr class='sel'> 
    <td>ads</td> 
    <td>azx</td> 
    <td>bbb</td> 
    </tr> 
    <tr> 
    <td>ads</td> 
    <td>azx</td> 
    <td>bbb</td> 
    </tr> 
</table>

CSS：

tr 
{ 
display: block; 
} 

tr.sel 
{ 
    outline: 1px solid red; 
}

，輸出是：http://jsbin.com/enupey/79/edit

來源

2012-08-20 07:43:10

-1

雅，它的一個bug

嘗試邊界，而不是外形，並給表格樣式border-collapse:collapse

HTML中沒有變化，CSS現在

tr.sel 
{ 
    border:1px solid red; 

} 
table{ 
    border-collapse:collapse; 
}

演示

fiddle，jsbin

來源

2012-08-20 07:51:15

如果我準備使用邊界，並且我想圍繞它進行概述 – Omu 2012-08-20 08:53:25

修復您的問題：更改CSS到。

tr 
{ 
    outline:1px solid red; 
    display:inherit; 
}

tr 
    { 
    outline:1px solid red; 
    display:block; 
    }

如果你是concerned with table layout，那麼你必須通過設置margin一些負值與空間作戰。在這裏看到：

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

的bug已經被報道跟進鏈接：http://code.google.com/p/chromium/issues/detail?id=81373&q=outline&colspec=ID%20Pri%20Mstone%20ReleaseBlock%20OS%20Area%20Feature%20Status%20Owner%20Summary

來源

2012-08-20 13:30:59

display：inherit或block廢除佈局 – Omu 2012-08-20 18:50:34

相關問題

CSS輪廓總是對鉻

回答

相關問題