Question

我正在尝试准备div以便我可以插入内容并设置样式，但是当在Firefox和IR中进行缩放时，DIVS会相互重叠并重叠。你能解释一下需要做些什么，因为有许多不同但令人困惑的解决方案在我的案例中不起作用。

由于

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;

}

Answer 1

当您使用带有% s的边距设置的绝对定位时，您将几乎不可避免地遇到一些重叠或布局问题，具体取决于用户的屏幕尺寸和缩放级别他们的格式可能会大不相同。一种更常用的方法是使用保证金%设定一定大小的页面，如果有的话。在构建时或构建后，您可以放大和缩小，并确保格式保持不变。

话虽这么说，我确实仔细检查了你的HTML和CSS，并为你的标题和内容部分添加了包装，然后使容器相对定位。我保留了你所有的余量%，它更稳定，也适用于Firefox（除非你缩小太多以至于没有任何东西甚至可以远程读取）。

这是fiddle

当放大IE和Firefox时，div相互重叠，Chrome就可以了

1 个答案: