2011-07-12 64 views
1

我有一个简单的问题,我在图片上方显示文本的div。在IE浏览器中,只有当文字div的图片&之间应该没有空隙时(如Firefox在那里没有空隙)之间存在差距。IE问题:div之间的差距&img

你能帮我弄清楚如何删除第一张图片&下面的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> 
+0

您是否尝试设置'padding' 0,而不是汽车?你有没有试过把'.pageBoxTop'的'padding/margin'设置为0? – nnnnnn

+0

@nnnnnn:padding:0;保证金:0;不工作 – Mack

+2

也许这个问题的解决方案之一:http://stackoverflow.com/questions/1207541/strange-gap-between-div-elements-in-ie-not-in-ff-or-opera会有帮助吗?试试'img'上的'display:block'。 – nnnnnn

回答

0

尝试添加填充顶:0像素到.pageBoxContent - 这是否解决问题的间距?

+0

NUP,我试过了 – Mack

0

问题是新行和一些空格。我有同样的该死的问题,在所有的浏览器看起来不错,但在IE浏览器之间有我的布局打破了我的div之间的空间,原因是我手动对齐源代码,并有一个空间某处的IE解释为& nbsp。尝试一下。删除img的结尾和div标签的开头之间的所有空格。删除评论以及

0

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

在你的情况下,该div也包含你的文本,所以你可能需要通过div环绕你的图像,并将该div设置为font-size:0;

你可以在这里看到修复行动:http://jsfiddle.net/jfriend00/83hJU/