Question

为什么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">

Answer 1

我会避免样式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 {
    ...
}

Answer 2

http://www.w3schools.com/css/pr_pseudo_first-child.asp

注意：对于：在IE中工作的第一个孩子，必须声明DOCTYPE

添加如下内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

它应该可行

Answer 3

将位置作为tr类的相对位置，这将修复。

tfoot tr {position：relative; border-bottom：solid 1px #ccc; }

为什么IE不显示边框？

3 个答案: