1

我有一个这样的 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 中不行

4

4 回答 4

3

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

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

position: relative; top: -3px;
于 2013-03-14T06:13:52.093 回答
1

如果您的 html 类似于以下代码段，它将起作用：

<table id="tblBody_32">
    <tbody>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
        </tr>
    </tbody>
</table>
于 2013-03-14T05:58:05.620 回答
1 
<!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>

我用这个，效果很好。

于 2013-03-14T06:06:38.283 回答
-1 
E[foo^="bar"]

一个 E 元素，其 "foo" 属性值正好以字符串 "bar" 开头

selector level 3

在caniuse.com中，他们编写了 IE 10.0 支持 css3 选择器，参见msdn 的相同IE 10 支持属性选择器

如果一切都不起作用，请使用selectivizr是一个 JavaScript 实用程序，它在 Internet Explorer 6-8 中模拟 CSS3 伪类和属性选择器 [] 在 IE10 中肯定有效。

于 2013-03-14T06:09:39.353 回答