0

コンテンツを挿入してスタイルを設定できるように 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;

}
4

1 に答える 1

0

s で動作するマージン設定で絶対配置を使用している%場合、ユーザーの画面サイズとフォーマットでのズーム レベルに応じて、オーバーラップまたはレイアウトの問題がほぼ必然的に発生します。大きく異なります。より一般的なアプローチは、ページを特定のサイズでデザインすること%です。構築中または構築後に、ズームインおよびズームアウトして、フォーマットが希望どおりであることを確認できます。

そうは言っても、HTML と CSS を少し調べて、ヘッダーとコンテンツ セクションのラッパーを追加し、コンテナーを相対的に配置しました。私はあなたが持っていたようにすべてのマージンを維持しましたが、%はるかに安定しており、Firefoxでも動作します（ズームアウトしすぎて何もリモートで判読できない場合を除きます）。

これがフィドルです

于 2012-11-22T00:49:20.203 に答える