IE中的邊框顯示不正確

我在網頁上放置了一個圍繞Flash SWF的圓形邊框，並且該公司的徽標需要位於其下方。（可以在Safari瀏覽器中正確看到，Chrome等在http://www.designboutiqueuk.com/loader/index.html）。IE中的邊框顯示不正確

問題是，在Internet Explorer中，邊框包圍了閃光燈和徽標（徽標不應位於邊框內）。在IE的某些版本中，一切都會出現在左邊，而它應該在瀏覽器中居中。如果IE的邊界不是圓角的話，那不是世界末日 - 我相信現在還不可能，儘管如果你知道的不同，這將是一個獎勵！任何幫助將不勝感激。非常感謝。

來源

2011-07-29 Thomasina

你將永遠不會得到IE嘗試沒有適當的文檔類型進行像其他更現代的瀏覽器。你處於怪癖模式。將此添加到您的第一行：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

來源

2011-07-29 12:39:57 Rob

太棒了，它好多了！謝謝大家！謝謝！我非常感謝你的幫助！ – Thomasina

@Thomasina - 選擇此項作爲接受的答案顯示感謝。 – Rob

+1好抓@Rob。 –

發生這種情況是因爲根據您的來源，您的徽標div位於電影div內。

<div style="width: 800px; margin: 20px auto; padding: 20px; border: #DD002B solid 2px; border-radius: 10px; -moz-border-radius: 10px;"> 
    <div align="center"> 

    //movie stuff here 

    </div> 

    <div style="margin: 0px 0px 0px -20px; padding: 40px 0px; display:block; float: left;"><img src="images/gsma_logo.jpg" width="100px"></div> 

</div>

它是自由浮動，正常的文檔流外拍攝，並與填充相結合，是坐在現代瀏覽器的罰款。

嘗試將徽標放置在最後一個關閉div之上。

來源

2011-07-29 11:52:39

我同意傑森。然而，要添加答案，您可以使用另一個寬度相同的容器，並將徽標放置在當前所在的位置。您可能需要調整邊距和填充以滿足您的需求，但是應該大致實現你正在尋找的東西。

<div style="width:800px;margin:20px auto"> 
    <div style="width: 800px; margin: 0 auto; padding: 20px; border: #DD002B solid 2px; border-radius: 10px; -moz-border-radius: 10px;"> 
     <div align="center"> 

     //movie stuff here 

     </div> 



    </div> 
    <div style="margin: 0px 0px 0px -20px; padding: 40px 0px; display:block; float: left;"><img src="images/gsma_logo.jpg" width="100px"></div> 
</div>

來源

2011-07-29 12:00:30 agmcleod

感謝您的建議！不幸的是，現在你會看到在IE瀏覽器中發生這種情況（請參閱screengrab，瞭解它是如何在IE中顯示不正確的）http://www.designboutiqueuk.com/loader/Outlook.jpg - 白色背景應該是完全黑色的，邊框和電影應該是並且徽標需要在邊界正下方顯示20px，排列在邊界的左側。在Safari瀏覽器中，除了徽標沒有排列在邊界左側之外，它是個不錯的選擇。http://www.designboutiqueuk.com/loader/index6.html – Thomasina

圍繞您的圖片的div的寬度也應該是800px。就白色背景而言，試試這個：http://pastie.org/2289937我在第1行添加了代碼，文檔類型。去掉身體標籤上的屬性（第288行），並用CSS第6行至第10行代替它。 – agmcleod

使用這個CSS：

#movie { 
width: 800px; 
margin-left: auto; 
margin-right: auto; 
margin-top: 20px; 
padding: 20px; 
border: #DD002B solid 2px; 
border-radius: 10px; 
-moz-border-radius: 10px; 
} 
#logo { 
width: 100px; 
height: //logo height 
margin-left: auto; 
margin-right: auto; 
float: left; 
display: block; 
clear: both; 
} 

<div id="movie"> 
//movie stuff here 
</div> 
<div id="logo"><img src="images/gsma_logo.jpg" width="100px"></div>

來源

2011-07-29 12:12:47 Maysam

IE中的邊框顯示不正確

回答

相關問題