Question

我是如何摆脱IE浏览器上的空白区域的。它是由隐藏的div引起的。当我删除div时，空白区域会移动。在FF中工作正常。

这是DIV：

 <div class="hidden" id="popup">
    <div>
        <H1 class="center" id="popupTitle"></H2><br/><br/><br/>
        <div style="position:relative; display:inline;">
            <p id="popupText" style="float: left"></p>
            <img id="popupImage" style="float: right"></img>
        </div>
    </div>
</div>

以下是与之相关的样式：

.ofCommunications .hidden    { display:none; visibility: hidden; }

我也试图将第三个div中的p和img显示在同一行，但这似乎也不起作用。

提前致谢卡罗琳

Answer 1

间距问题很可能是由于您的标记不正确（“”）以及同时使用display：none;和可见性：隐藏;

可见性会导致元素占用空间，因此您需要摆脱这种风格。

如果您进行这些调整，除非您在提供的代码中看不到其他问题（例如：您的父容器为.hidden有拼写错误的类名称），否则它应该有效。

提示：永远不要用＆lt; br /＆gt;标签。它们仅用于破坏文本。摆脱显示：内联;和位置：相对;在你的另一个＆lt; div>因为没有它是有意义的（相对定位是默认的）。小写所有标签。大写标签是遥远的过去，并不理想。

Answer 2

几条评论。一旦你清理了它，它可能有助于解决这个和其他未来的麻烦：

删除内联样式并将它们放在样式表中。

在隐藏的div下做的第二个div是什么？这对我来说看起来多余而且没必要。删除它。

如果你是浮动元素，那么你需要在轨道上清除它们。这可能就是为什么你把东西放在错误的位置。

你有没有显示：阻止图像旁边的p元素并给它一个宽度？否则它无论如何都不会漂浮。

你的h1不应该是大写的。

希望这些建议有所帮助。

Answer 3

尝试此操作以获得<p>和<img>排队：

<div>
    <p id="popupText" style="float: left"></p>
    <p style="float: right"><img id="popupImage" /></p>
</div>

我删除了position: relative，因为您提供的代码和display: inline不需要它，因为将div设为内联是没有意义的。

Answer 4

您检查过父元素的宽度吗？如果父元素上的宽度设置得太小，则没有足够的空间来渲染段落和图像在同一行上。这可能会导致您的段落和图像在不同的行上呈现。

css - 隐藏的div在IE中有很大的空白区域

4 个答案: