不可见的HTML元素

时间:2013-03-06 23:26:47

标签: html css

在以下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代码。

3 个答案:

答案 0 :(得分:2)

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

所以这个:

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

变得类似

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

答案 1 :(得分:1)

删除此样式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文件并删除所有不需要的样式。

答案 2 :(得分:0)

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