为什么边框tfoot tr:first-child没有在IE中显示.我正在检查IE7.
font-weight:bold; background:yellow 在IE中显示但边框不显示
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>
更新:
我正在使用这个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除了出于语义原因,我会避免使用样式元素,因为它们并不真正"存在".你最好以表格单元格为目标,例如:
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;
}
此外,由于您直接针对嵌套元素,因此您可以使用子选择器,这对于浏览器来说更快解析(它们只需要向上/向下搜索一个级别).
table > tfoot > tr:first-child > th,
table > tfoot > tr:first-child > td {
...
}