0

PLEASE remove - it was a typo:)

The following CSS

display: table; height: 100%;

works fine in inline mode and doesn't work being extracted into a CSS class. How do I get it fixed?

HTML with inline CSS (working version), to reproduce the problem search for first occurrence of "display: table; height: 100%;" then create a class .blah { display: table; height: 100%; } and try using it instead of inline 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 回答