0

css と html で何行も書いた後でさえ、css の動作はまだ私を驚かせています - 悪い意味で。

友人がレイアウトを構築する方法を示すためにサンプル サイトをまとめていましたが、Firefox 3.0.5 と IE8 では、#header、#content、#footer-div の間にどこからともなくマージンが作成されます。IE7 モードに切り替えると、余白が消えます。

CSS:

html, body {
   background-color: #fff;
   margin: 0;
   padding: 0;
   width: 100%;
}

#page {
   background-image: url('bg_gradiant.png');
   background-repeat: repeat-y;
   width: 950px; /* 770px + 2 * 90px; */
   margin: 0 auto;
   padding-left: 90px;
}

#header {
   width: 770px;
   margin: 0;
   padding: 0;
}

#header #row1 {
   background-color: #9ab3ba;
   height: 50px;
}
#header #row2 {
   background-color: #517279;
   height: 50px;
}

#content {
   width: 770px;
   background-color: #d7e9ed;
}

#footer {
   background-color: #5eb6cc;
   width: 770px;
   height: 150px;
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <title>Test</title>
</head>
<body>
<div id="page">
   <div id="header">
      <div id="row1"></div>
      <div id="row2"></div>
   </div>
   <div id="content">
      <p style="height: 600px">Beware of the Content</p>
   </div>
   <div id="footer">
   </div>
</div>
</body>
</html>

このページはこちらからご覧いただけます: https://codepen.io/lx-s/pen/eRrOpL

IE Developer Tools と Firebug をブラウズすると、これらの div にデフォルトのマージン値が設定されていないことがわかりましたが、ご覧のとおり、そこにあります。それらを取り除く方法のヒントを教えていただければ幸いです-それは私を真剣に夢中にさせています.

前もって感謝します！

4

5 に答える 5

7

スタイルシートに次を追加します。

* {
    margin: 0;
}
于 2009-07-24T13:38:19.730 に答える
3

DIV ではなく、デフォルトでマージンが設定されている P タグです。0に設定してテストしたところ、スペースが消えました。

于 2009-07-24T13:34:58.470 に答える
3

余白は #content div の p タグにあります

これが少し役立つことを願っています

于 2009-07-24T13:36:11.777 に答える
1

リセットCSSを使用する必要があります。開発するすべての Web ページ/サイトでこれを行う必要があります。CSS を適切にリセットすると、デフォルト設定の多くが削除され、クロスブラウザーのルック アンド フィールがより簡単になります。

Eric MeyerやYahoo UI Reset CSSなど、いくつかあります。

于 2009-07-24T13:33:57.973 に答える
0

以前にこれを見たとき、段落のマージンを維持できるように、含む DIV の下部に padding-bottom:1px を追加しました。

それが役立つことを願っています

于 2012-03-28T19:33:08.310 に答える