为什么边界< tr>不显示在IE? [英] Why border of <tr> not showing in IE?
问题描述
为什么 tfoot tr:first-child
的边框在IE中不显示。我在检查IE7。
Why border of tfoot tr:first-child
not showing in IE. I'm checking in IE7.
font-weight:bold;背景:黄色
显示在IE中,但边框不是
font-weight:bold; background:yellow
is showing in IE but border not
table {
border-collapse: collapse;
border-spacing: 0;
}
table tfoot tr:first-child {
font-weight:bold;
background:yellow;
border-top:2px solid red;
border-bottom:2px solid red;
}
HTML
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th align="left" scope="col">XXXX</th>
<th align="right" scope="col">XXXX</th>
<th align="right" scope="col">XXXX</th>
<th align="right" scope="col">XXXX</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">XXXX</td>
<td align="right">XXX</td>
</tr>
<tr>
<td colspan="4">XXX</td>
</tr>
</tfoot>
<tbody>
<tr>
<td align="left">XXXX</td>
<td align="right">XXXX</td>
<td align="right">XXXX</td>
<td align="right">XXXX</td>
</tr>
</tbody>
</table>
更新:
this doctype
i'm using this doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
推荐答案
我会避免使用样式 tr
元素,因为它们不是真正存在本身,除了语义原因。你最好选择定位表格单元格本身,具体如下:
I would avoid styling tr
elements because they don't really "exist" as such, apart from for semantic reasons. You're better off targeting the table cells themselves, with something like this:
table tfoot tr:first-child th,
table tfoot tr:first-child td {
font-weight:bold;
background:yellow;
border-top:2px solid red;
border-bottom:2px solid red;
}
此外,由于您直接定位嵌套元素,因此可以使用子选择器,这是浏览器解析的速度更快(他们只需要搜索一级上/下)。
Also, since you are targeting directly nested elements, you can use the child selector, which is faster for browsers to parse (they only have to search one level up/down).
table > tfoot > tr:first-child > th,
table > tfoot > tr:first-child > td {
...
}
这篇关于为什么边界< tr>不显示在IE?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!