IE问题：div和img之间的差距

我有一个简单的问题，我在文本的div上面显示图片。只有在Internet explorer浏览器中，图片之间才会出现空白。当文本不应该有空格的时候(比如在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>

尝试添加padding-top: 0px到。pageboxcontent -这能解决间距问题吗?

问题是新行和一些空格。我有同样的该死的问题，在所有浏览器中看起来不错，但在IE中，我的div之间有空格，这破坏了我的布局，原因是我手动对齐源代码，并且在IE解释为&nbsp的地方有一个空间。试试。删除img结尾和div标签开始之间的所有空白。同时删除注释

IE(偶尔也有一些其他浏览器)喜欢让人觉得在图像旁边有一行文本，有时会在图像和其他东西之间引入空格，因为它试图将图像与(虚幻)文本的基线对齐。你通常可以通过在包含图像的div上设置font-size: 0来消除它。

在你的例子中，这个div也包含你的文本，所以你可能需要用一个div来包围你的图像，并将这个div设置为font-size: 0;

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

在这个问题的答案中的进一步信息:

元素，而不是FF或Opera

相关内容

最新更新

热门标签：