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>

テーブルIDが始まるテーブルセルに存在するチェックボックスにこのcssを適用する必要がありますtblBody_

このことは、IE8では正常に機能しますが、IE10では機能しません

4

4 に答える 4

3

outline: solid redルール内に追加するなどしてわかるように、問題はセレクターにはありません。そして、正のマージンを設定することは機能します。問題は、IEがチェックボックス要素の負のマージンを処理する方法にあるようです。実際のIE8にもこの問題があるかどうかはわかりませんが、IE10のIE8エミュレーションモードに問題があります。

簡単な回避策は、負のマージンの代わりに相対位置を使用することです。

position: relative; top: -3px;
于 2013-03-14T06:13:52.093 に答える
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

HTML が次のスニペットのようなものであれば、動作します。

<table id="tblBody_32">
    <tbody>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
        </tr>
    </tbody>
</table>
于 2013-03-14T05:58:05.620 に答える
-1 
E[foo^="bar"]

「foo」属性値が文字列「bar」で正確に始まるE要素

selector level 3

そしてcaniuse.comで、彼らはIE10.0がcss3セレクターをサポートするように書いています。msdnIE10が属性セレクターをサポート するのと同じことをここで参照してください。

すべてが機能しない場合は、 selectivizrを使用してください。selectivizrは、InternetExplorer6-8でCSS3疑似クラスと属性セレクターをエミュレートするJavaScriptユーティリティです[]IE10で確実に機能します。

于 2013-03-14T06:09:39.353 に答える