divs在IE和Firefox中放大時互相重疊，Chrome可以正常工作

我試圖準備div，以便插入內容並對它們進行樣式設置，但是當在Firefox和IR中縮放時，DIVS會彼此重疊並重疊。你能解釋一下需要做什麼嗎？因爲有很多不同的但令人困惑的解決方案在我的情況下不起作用。divs在IE和Firefox中放大時互相重疊，Chrome可以正常工作

感謝

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<!-- TemplateBeginEditable name="doctitle" --> 
<title>My Website</title> 
<!-- TemplateEndEditable --> 
<link href="../css/stylesheet.css" rel="stylesheet" type="text/css" /> 
<!-- TemplateBeginEditable name="head" --> 
<!-- TemplateEndEditable --> 
</head> 

<body> 
<div id = "container"> 
    <ul id="nav"> 
    <li><a href="../about.php">About</a></li> 
    <li><a href="../hobbies.php">Hobbies</a></li> 
    <li><a href="../contact.php">Contact</a></li> 
    </ul> 

    <div id = "container1"> 

    container1 
    </div> 

    <div id = "container2"> 
    container 2 

    </div> 
    <div id = "container3"> 
    container 3 

</div> 
    </div> 

</body> 
</html>

CSS

/* CSS Document */ 

body { 

    margin: 0px; 


} 

#container { 

position:relative; 
min-height: 800px; 
margin:5%; 
background-color:#FFC; 
height: 100%; 
width: 90%; 
overflow: hidden; 


} 

#container1 { 


position:absolute; 
margin-left: 10%; 
margin-right: 10%; 
margin-top: 10%; 
overflow: hidden; 
background-color:#6FA; 
height: 30%; 
width: 80%; 


} 

#container2 { 


position:absolute; 
margin-left: 10%; 
margin-top: 45%; 
background-color:#09C; 
overflow: hidden; 
height: 30%; 
width: 37%; 
float:left; 


} 

#container3 { 


position:absolute; 
margin-left: 53%; 
margin-top: 45%; 
margin-right: 10%; 
background-color:#6FE; 
overflow: hidden; 
height: 30%; 
width: 37%; 
float:right; 


} 



#nav { 

width: 750px; 
margin-left: 10%; 
padding: 0%; 
list-style:none; 


} 

#nav li { 

    float:left; 

} 

#nav a { 

    display:block; 
    font-weight:bold; 
    text-align:center; 
    width:150px; 
    text-decoration:none; 
    background-color:#DBDBDB; 
    color:#03F; 
    border-left: 1px solid #fff; 
    border-right: 1px solid #fff; 

}

來源

2012-11-21 user1347219

當你使用有與%的工作邊距設置絕對定位，你將幾乎不可避免地碰上一些重疊或佈局問題取決於用戶的屏幕尺寸以及他們在您的格式下的縮放級別可能會大不相同。更常用的方法是使用保證金% s，以一定的尺寸設計您的頁面，如果有的話。在建設之後或之後，您可以放大和縮小，並確保格式保持您想要的狀態。

這就是說，我確實瀏覽了你的HTML和CSS，併爲你的頁眉和內容部分添加了包裝，然後使容器相對定位。我保留了所有的保證金% s，並且它更加穩定，並且可以在Firefox上運行（除非您縮小範圍以至於無論如何都無法識別任何東西）。

這裏的fiddle

來源

2012-11-22 00:49:20 Peter

所以應該都容器中，在像素而不是百分比一定的大小設置，並沒有真正理解爲什麼你所創建的包裝。這是最佳做法嗎？ – user1347219

我做了一些進一步的修改，希望它沒問題，請讓我知道，因爲我仍然需要了解abourt這些包裝和絕對vs親戚是如何一起使用的。 http://jsfiddle.net/XVpUC/ PS>忽略導航欄，因爲我專注於Div定位 – user1347219

如果你使用包裝，那麼你可以使用相對定位佈局元素的主要塊，然後絕對定位小部分包裝而不是整個頁面。這樣，當你放大和縮小布局可以做出更好的反應 - 你可以獲得兩全其美的效果。在像素vs％s上，使用你喜歡的和最適合你的項目的東西。一般來說，大多數人喜歡像素，但這是一個人的決定。你的小提琴看起來不錯，它看起來像解決了你遇到的問題。 – Peter

divs在IE和Firefox中放大時互相重疊，Chrome可以正常工作

回答

相關問題