0

削除してください - それはタイプミスでした:)

次のCSS

display: table; height: 100%;

インライン モードでは問題なく動作し、CSS クラスに抽出されても動作しません。どうすれば修正できますか？

「display: table; height: 100%;」の最初の出現に対する検索の問題を再現するために、インライン CSS を使用した HTML (作業バージョン)。次に、クラス .blah { display: table; を作成します。高さ: 100%; インライン CSS の代わりに使用してみてください。

<html>
<head>
    <title></title>
</head>
<body>
    <div style="margin: 100px; width: 100px; height: 430px; background-color: gray; border: 1px solid gray;">
        <table style='background-color: white; width: 100%; height: 100%; border-collapse: collapse; vertical-align: top;'>
            <tr>
                <td style='height: 33.33%;'>
                    <div style="position: relative; width: 100%; height: 100%;">
                        <div style="position: absolute; top: -50%; height: 100%; background-color: green;">
                            <div style="display: table; height: 100%;">
                                <div style="display: table-cell; vertical-align: middle;">
                                    <div style="border: 1px solid #ccc; width: 30px; height: 30px; background-color: yellow;">A</div>
                                </div>
                            </div>
                        </div>
                        <div style="position: absolute; bottom: -50%; height: 100%;">
                            <div style="display: table; height: 100%;">
                                <div style="display: table-cell; vertical-align: middle;">
                                    <div style="border: 1px solid #ccc; width: 30px; height: 30px; background-color: yellow;">B</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td style="height: 33.33%;">
                    <div style="position: relative; width: 100%; height: 100%;">
                        <div style="position: absolute; bottom: -50%; height: 100%;">
                            <div style="display: table; height: 100%;">
                                <div style="display: table-cell; vertical-align: middle;">
                                    <div style="border: 1px solid #ccc; width: 30px; height: 30px; background-color: yellow;">C</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
             <tr>
                <td style="height: 33.33%;">
                  <div style="position: relative; width: 100%; height: 100%;">
                        <div style="position: absolute; bottom: -50%; height: 100%; display: table-cell; vertical-align: middle;">
                            <div style="display: table; height: 100%;">
                                <div style="display: table-cell; vertical-align: middle;">
                                    <div style="border: 1px solid #ccc; width: 30px; height: 30px; background-color: yellow;">D</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </div>

</body>
</html>
4

1 に答える 1

3

この問題は、クラスで定義されたスタイルをオーバーライドする CSS の別のスタイルに関連している可能性があります。インライン スタイリングの優先度が高くなります。

このJSFiddleでは、インラインとクラスの両方のケースで動作しています。

CSS

.test {
    display: table; 
    height: 100%;
    background:#ccc;
}

HTML:

<div style="height:100px">
    <div class="test">
        Hi
    </div>
    <div style="display: table; height: 100%; background:#ccc;">
        World
    </div>
</div>

編集:そして、あなたがおそらくあなたの質問への回答以外のコーディングのアドバイスを求めていないことは知っていますが、可能であればインラインスタイリングを減らしてみるべきだと思います. 特に、HTML のすべての行にインライン スタイルがあるためです。少なくともいくつかの属性をクラスに移動して、コードをより良くし、このような単純な CSS の優先度の問題を回避しやすくすることができます。

于 2013-05-17T15:56:41.223 に答える