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可以正常工作

回答

相关问题