Question

请删除 - 这是一个错字：）

以下CSS

display: table; height: 100%;

在内联模式下工作正常，无法提取到CSS类中。我该如何修复它？

带内联CSS的HTML（工作版），重现问题搜索第一次出现“display：table; height：100％;”然后创建一个类.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>

Answer 1

问题可能与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优先级问题。

内联CSS产生不同的结果，然后是等效的CSS类

1 个答案: