1

divラッパー内のスタック可能なsを使用して簡単なサイトを作成しましたdiv。問題は、にコンテンツを追加するたびに、突然何らかのタイプのスペースが追加され、それを取り除くことができないことです。のコンテンツはdiv動的であるため、height常に同じになるとは限りません。

なぜこれが起こるのですか？それは問題ですか、divそれともコンテンツ自体ですか？

コンテンツのないdivの下の画像

http://i.imgur.com/wbPfwfW.png

コンテンツを含むdivの下の画像

http://i.imgur.com/R6ycvYP.png

私のCSS

@charset "utf-8";
/* CSS Document */

/* Basic */
body {
    background-color: #666;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#wrapper {
    width: 900px;
    height: auto;
    margin: 10px auto;
    position: relative;
    background-color: #999;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 5px 18px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}
#header {
    width: 900px;
    height: 180px;
    background-color: #9C0;
}
#menubar {
    width: 900px;
    height: 36px;
    background-color: #906;
}
#content {
    width: 900px;
    height: 350px;  
    position: relative;
    background-color: #036;
}
#footer {
    width: 900px;
    height: 40px;
    position: relative;
    background-color: #F90;
}

/* Nav */
#nav {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}
#nav li {
    float: left;
}
#nav li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #000;
}
#nav li a:hover {
    color: #000;
    background-color: #fff; 
}

私の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" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
  <div id="header">
  </div>
  <div id="menubar">
  <ul id="nav" >
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
  </ul>
  </div>
  <div id="content">
  </div>
  <div id="footer">
  </div>
</div>

4

3 に答える 3

7

提供したCSSを見ると、正規化するのを忘れているようです。少なくともこれをCSSファイルの先頭に追加します。

* { 
  margin: 0; 
  padding: 0; 
}

これにより、ブラウザ固有の余白や要素からのパディングが削除され、空白が発生する可能性があります。

于 2013-03-17T15:26:29.543 に答える
3

Normalize.cssと呼ばれるcssスクリプトもあります。これにより、ブラウザーはすべての要素をより一貫して、最新の標準に沿ってレンダリングします。正規化が必要なスタイルのみを正確に対象としています。次の場所からダウンロードできます：http：//necolas.github.com/normalize.css/

于 2013-03-17T16:54:11.183 に答える
1

私にとっては、CSSNORMALIZERで同じ問題が発生しました

そして、このcssコードをメインコンテナに追加するだけです。

border: 1px solid transparent;

IE6がTRANSPARENCYをサポートしていないことをご存知かもしれませんが、IE6が黒い境界線を表示することを除いて、IEとともにすべての主要なブラウザで動作しているようです。

お役に立てれば ：-）

于 2013-10-21T22:32:19.047 に答える