td:第一个孩子似乎不适用于IE

时间:2012-09-12 07:22:41

标签: html css

我是HTML的新手,我只想创建一个基本表格,我可以在CSS中指定列的宽度。

我正在创建一组HTML帐户(35页文档),因此表格是我需要制作的基础,并且整个html中将使用大约5个标准表格。

我快速前进,下面的代码似乎与我需要的完全相同,但是td:first-child在IE中不起作用。

我搜索过并且支持它。谁能告诉我我做错了什么?如果有更好的方法,请告诉我。

<html>
<head>
    <title>Company Accounts</title>
    <style type="text/css">
        table { width: 264mm; border: 1px solid; table-layout:fixed}
        td {border: 1px solid; padding: 5px}

        .T1C1 td:first-child {width: 10mm; text-align:right}
        .T1C2 td:first-child + td {width: 50mm}
        .T1C3 td:first-child + td + td {width: 10mm; text-align:right}
        .T1C4 td:first-child + td + td + td {width: 50mm; text-align:right}
    </style>
</head>
<body>
    <table class="T1C1 T1C2 T1C3 T1C4">
        <tr> <td>1</td> <td>2</td>  <td>3</td>  <td>4</td> </tr>
        <tr> <td>1</td> <td>2</td>  <td>3</td>  <td>4</td> </tr>
        <tr> <td>1</td> <td>2</td>  <td>3</td>  <td>4</td> </tr>
        <tr> <td>1</td> <td>2</td>  <td>3</td>  <td>4</td> </tr>
        <tr> <td>1</td> <td>2</td>  <td>3</td>  <td>4</td> </tr>
    </table>
</body>
</html>

2 个答案:

答案 0 :(得分:2)

:first-child伪类是Quirks Mode中IE不支持的众多CSS功能之一。这就是为什么添加doctype有帮助,如评论中所述。但它不仅仅是任何文档类型。它必须是在IE中触发“标准模式”的一个,例如<!doctype html>,放在HTML文档的最开头。

Microsoft文档中明确描述了这个特殊的怪癖: “注意Pseudo-class仅在符合标准的模式下启用(严格!DOCTYPE)。” http://msdn.microsoft.com/en-us/library/ie/cc848865%28v=vs.85%29.aspx 但是,文档中的“严格”一词具有误导性,并且除了链接页面上列出的文档类型之外 http://msdn.microsoft.com/en-us/library/ie/ms535242%28v=vs.85%29.aspx HTML5 doctype <!doctype html>也有效,

答案 1 :(得分:0)

以下是此css伪类的引用:https://developer.mozilla.org/en-US/docs/CSS/:first-child

您可以在那里找到浏览器兼容性表。

页面底部有一些IE警告:

  

在动态添加元素时,Internet Explorer 7不会更新样式。在Internet Explorer 8中,如果通过单击链接动态插入元素,则在链接失去焦点之前不会应用第一个子样式。