2011-07-12 66 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/