为什么在IE中不显示<tr>的边框？

为什么在IE中不显示tfoot tr:first-child的边框。我正在检查IE7。为什么在IE中不显示<tr>的边框？

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">

来源

2010-05-14 Jitendra Vyas

请发布您的'

'的HTML。 – Asaph2010-05-14 06:43:37

@fmark：堆栈溢出和Doctype由不同的公司运行。这个问题在这里完全正常。 – animuson 2010-05-14 06:49:21

你检查了其他浏览器吗？我很肯定，TR不支持边界...只是设置你的TD接受边界 – Jason 2010-05-14 07:11:12

回答

我会避免造型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 { 
    ... 
}

来源

2010-05-14 13:55:42 DisgruntledGoat

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">

，它应该工作

来源

2010-05-14 06:55:37 nico

给予tr类的相对位置，它将修复。

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

来源

2014-02-26 07:04:16 nikesh

为什么在IE中不显示<tr>的边框？

回答

相关问题