Question

我有一个简单的问题，我在一个div文本上方显示图片。在Internet Explorer中，只有图片和图片之间存在差距。文本的div应该没有间隙（比如在Firefox中没有间隙）。

你能帮我弄清楚如何消除第一张照片和照片之间的差距吗？下面的div？

    <html>
<head>
    <style type="text/css">
    <!--
        .pageBox        { width: 873px; }
        .pageBoxContent { background-color: blue; padding: auto; margin: auto; /*background: url("images/pageBoxMid.png") repeat-y;*/
                          padding-right: 50px; padding-left: 50px; margin-top: 0px; background-color: blue; }

        .pageBoxTop     { background-color: red; }
        .pageBoxBottom  { background-color: red; }
    -->
    </style>
</head>

<body>

    <div id="container">

        <div class="pageBox">
            <img class="pageBoxTop" src="images/pageBoxTop.png" alt=""/>
            <!-- Gap appears here on display -->
            <div class="pageBoxContent">
                It was founded in the mid-3rd century BC by Arsaces I. Mithradates I greatly expanded the empire by seizing Media and Mesopotamia from the SeleuIt was founded in the mid-3rd century BC by Arsaces I. Mithradates I greatly expanded the empire by seizing Media and Mesopotamia from the SeleuIt was founded in the mid-3rd century BC by Arsaces I. Mithradates I greatly expanded the empire by seizing Media and Mesopotamia from the SeleuIt was founded in the mid-3rd century BC by Arsaces I. Mithradates I greatly expanded the empire by seizing Media and Mesopotamia from the SeleuIt was founded in the mid-3rd century BC by Arsaces I. Mithradates I greatly expanded the empire by seizing Media and Mesopotamia from the SeleuIt was founded in the mid-3rd century BC by Arsaces I. Mithradates I greatly expanded the empire by seizing Media and Mesopotamia from the SeleuIt was founded in the mid-3rd century BC by Arsaces I. Mithradates I greatly expanded the empire by seizing Media and Mesopotamia from the SeleuIt was founded in the mid-3rd century BC by Arsaces I. Mithradates I greatly expanded the empire by seizing Media and Mesopotamia from the SeleuIt was founded in the mid-3rd century BC by Arsaces I. Mithradates I greatly expanded the empire by seizing Media and Mesopotamia from the SeleuIt was founded in the mid-3rd century BC by Arsaces I. Mithradates I greatly expanded the empire by seizing Media and Mesopotamia from the SeleuIt was founded in the mid-3rd century BC by Arsaces I. Mithradates I greatly expanded the empire by seizing Media and Mesopotamia from the SeleuIt was founded in the mid-3rd century BC by Arsaces I. Mithradates I greatly expanded the empire by seizing Media and Mesopotamia from the SeleuIt was founded in the mid-3rd century BC by Arsaces I. Mithradates I greatly expanded the empire by seizing Media and Mesopotamia from the SeleuIt was founded in the mid-3rd century BC by Arsaces I. Mithradates I greatly expanded the empire by seizing Media and Mesopotamia from the SeleuIt was founded in the mid-3rd century BC by Arsaces I. Mithradates I greatly expanded the empire by seizing Media and Mesopotamia from the Seleu
            </div>
            <img class="pageBoxBottom" src="images/pageBoxBottom.png" alt=""/>
        </div>

    </div>

</body>
</html>

Answer 1

尝试添加padding-top：0px到.pageBoxContent - 这样可以解决间距问题吗？

Answer 2

问题是新线和一些空格。我有同样的问题，在所有浏览器看起来都不错但在IE中我的div之间有空间打破了我的布局，原因是我手动对齐源代码，并且在某处IE浏览器中有一个空间作为＆amp; nbsp。试试看。删除img末尾和div标签开头之间的所有空格。同时删除评论

Answer 3

IE（有时候还有其他一些浏览器）喜欢让人相信有一行文字和图像，有时会在图像和其他东西之间引入间距，因为它会尝试将图像对齐到（幻像）的基线文本。您通常可以通过在标签上使用CSS或样式指令在包含图像的div上设置font-size：0来消除它。

在您的情况下，该div还包含您的文本，因此您可能需要用div包围图像并将div设置为font-size：0;

您可以在此处看到此修复操作：http://jsfiddle.net/jfriend00/83hJU/。

Answer 4

尝试在display: block元素上设置img。如果没有它，IE可能会尝试将img的底部与文本的基线对齐，并为“悬挂”字母留出空间，如“g”或“y”。

此问题的答案中的更多信息：Strange gap between <div> elements in IE, not in FF or Opera

IE问题：div和amp;之间的差距IMG

4 个答案: