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轮廓总是对铬

回答

相关问题