Question

我有一个像这样的CSS选择器

table[id^="tblBody_"] tbody tr td input[type="checkbox"]
{
    margin-top:-3px;
}

HTML

<table id="tblBody_tblApplicationWizardPageDetail">
<tbody>
<tr>
  <td>
    <input id="chkDisplayedBit" type="checkbox"/>
  </td>
</tr>
</tbody>
</table>

我必须在表格单元格中存在的复选框中应用此css，其中表格ID以tblBody_开头

这个东西在IE8中正常工作但在IE10中没有工作

Answer 1

问题不在选择器中，因为您可以看到，例如在规则中添加outline: solid red。并设置正余量有效。问题似乎是IE处理复选框元素上的负边距。我不知道实际的IE 8是否也有这个问题，但IE 10中的IE 8仿真模式也有它。

简单的解决方法是使用相对定位而不是负边距：

position: relative; top: -3px;

Answer 2

如果您的html与以下代码段类似，则可以使用：

<table id="tblBody_32">
    <tbody>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
        </tr>
    </tbody>
</table>

Answer 3

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style type="text/css">
        *{ margin: 0px; padding: 0px; }
        table[id^="tblBody_"]{ border-collapse:collapse; border-spacing:0; margin: 20px auto; width: 200px; }
        table[id^="tblBody_"] tbody tr td{ border:1px solid #ddd; width: 90px;padding: 5px;  }
        table[id^="tblBody_"] tbody tr td input[type="checkbox"] { margin-left: 20px; }
    </style>
</head>
<body>
    <table id="tblBody_abc">        
        <tbody>
            <tr>
                <td>1</td>
                <td><input type="checkbox" name="hobbit" id="hobbit"></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

我用它，它工作正常。

Answer 4

E[foo^="bar"]

一个E元素，其“foo”属性值恰好以字符串“bar”

selector level 3

并在caniuse.com他们写的IE 10.0支持css3选择器see here 同一个msdn IE 10支持属性选择器

如果一切无效，使用selectivizr是一个JavaScript实用程序，可以在Internet Explorer 6-8中模拟CSS3伪类和属性选择器[]肯定适用于IE10。

CSS选择器在IE10中不起作用

4 个答案: