我不是CSS专家,特别是当它定位时,我希望这个很容易解决.
这是我简化的HTML:
<body>
<div style="height:100%;width:100%;">
<div id="map" style="bottom:250px;height:100%;overflow:hidden;position:absolute;width:100%;">
<!-- The controls div does not render correctly. -->
<div id="controls" style="left:10px;position:absolute;top:10px;">
</div>
<!-- The legend and logos divs do render correctly. -->
<div id="legend" style="bottom:45px;left:10px;position:absolute;">
</div>
<div id="logos" style="bottom:5px;left:10px;position:absolute;">
</div>
</div>
<div id="search" style="bottom:0;height:250px;position:absolute;width:100%;">
</div>
</div>
</body>
"controls"div无法正确呈现.事实上,它根本不显示.如果我拿出"顶部:10px;" 样式,并将其替换为"bottom:400px;",它确实正确呈现.但这不是我想要的,因为如果用户调整浏览器窗口大小,"map"div的高度会被调整.我也不想使用JavaScript来定位div.
"图例"和"徽标"div都正确呈现.
我在Firefox中进行测试.