Question

在以下HTML文件中，内部div中包含的文本（如“Argentina”或“Test Two”）不可见;我无法弄清楚为什么。任何有关它们隐形的帮助都将非常感激。

<!DOCTYPE html>
<html>
<body>
    <div class="GLH-2XVBBO">
        <div
            style="position: absolute; left: 5px; width: 190px; top: 2px; height: 25px;">
            <div class="gwt-Label GLH-2XVBEO">Latest Contribution</div>
        </div>
        <div
            style="position: absolute; left: 0px; width: 200px; top: 35px; bottom: 5px;">
            <div class="GLH-2XVBDO" style="overflow: auto; position: relative;">
                <div style="position: relative;">
                    <div class="GLH-2XVBCO" style="position: relative;">
                        <div aria-hidden="true"
                            style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex;">&nbsp;</div>
                        <div
                            style="position: absolute; overflow: hidden; left: 0px; top: 0px; right: 0px; height: 45px;">
                            <div class="GLH-2XVBPO"
                                style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;">
                                <div aria-hidden="true"
                                    style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex;">&nbsp;</div>
                                <div
                                    style="position: absolute; overflow: hidden; left: 0px; top: 0px; width: 200px; height: 20px;">
                                    <div
                                        style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;"
                                        class="gwt-Label GLH-2XVBAP">Argentina</div>
                                </div>
                                <div
                                    style="position: absolute; overflow: hidden; left: 0px; top: 25px; width: 200px; height: 20px;">
                                    <div
                                        style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;"
                                        class="gwt-Label GLH-2XVBOO">Test Two</div>
                                </div>
                            </div>
                        </div>
                        <div
                            style="position: absolute; overflow: hidden; left: 0px; top: 55px; right: 0px; height: 45px;">
                            <div class="GLH-2XVBPO"
                                style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;">
                                <div aria-hidden="true"
                                    style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex;">&nbsp;</div>
                                <div
                                    style="position: absolute; overflow: hidden; left: 0px; top: 0px; width: 200px; height: 20px;">
                                    <div
                                        style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;"
                                        class="gwt-Label GLH-2XVBAP">General Audience</div>
                                </div>
                                <div
                                    style="position: absolute; overflow: hidden; left: 0px; top: 25px; width: 200px; height: 20px;">
                                    <div
                                        style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;"
                                        class="gwt-Label GLH-2XVBOO">Test Two</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

关于嵌套div的道歉。它是GWT生成的HTML代码。

Answer 1

您的班级.GLH-2XVBCO需要一个明确的高度。

所以这个：

<div class="GLH-2XVBCO" style="position: relative;">

变得类似

<div class="GLH-2XVBCO" style="position: relative; height: 50px;">

Answer 2

删除此样式style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex;"

来自div的

<div aria-hidden="true" style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex;">&nbsp;</div>

然后你可以看到阿根廷。

顺便问一下，为什么要创建这么复杂的HTML？您应该将样式移动到CSS文件并删除所有不需要的样式。

Answer 3

好吧，我可以通过禁用一些“位置：相对”样式来修复它，特别是GLH-2XVBDO和GLH-2XVBCO中的样式，以及它们之间的DIV，但我不确定你在尝试什么完成所有这些嵌套的DIV。

不可见的HTML元素

3 个答案: