2

私のウェブサイトはブラウザの上部に触れていません。上部に少し隙間があります。

公然と言えば、体が窓の上部に触れていないので、上部に触れてほしい。

HTML：

<div id="container">
    <div id="header">
        <h1>
            Example
        </h1>
    </div>
    <div id="navigation">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact us</a></li>
        </ul>
    </div>
</div>

CSS：

#container
{
    margin: 0 auto;
    width: 350px;
    background: #fff;
    float: left;
}

#header
{
    background: #ccc;
    padding: 20px;
}

#header h1 { margin: 0; }

#navigation
{
    float: left;
    width: 350px;
    background: #333;
}

#navigation ul
{
    margin: 0;
    padding: 0;
}

#navigation ul li
{
    list-style-type: none;
    display: inline;
}

#navigation li a
{
    display: block;
    float: left;
    padding: 5px 10px;
    color: #fff;
    text-decoration: none;
    border-right: 1px solid #fff;
}

#navigation li a:hover 
{ 
    background: #383; 
}

そしてここに例があります：

http://jsfiddle.net/deerox/YxwqX/

4

3 に答える 3

6

クイックフィックス、 body および html タグを次のようにスタイル設定します。

html, body
{
    margin: 0;
    padding: 0;
}

さらに読む、CSSリセット：

CSS リセット (または「CSS のリセット」) は、すべての HTML 要素のスタイル設定を一貫したベースラインにリセットする短い、多くの場合圧縮 (縮小) された CSS ルールのセットです。

ご存じないかもしれませんが、すべてのブラウザには独自のデフォルトの「ユーザー エージェント」スタイルシートがあり、スタイル設定されていない Web サイトをより読みやすくするために使用されます。たとえば、ほとんどのブラウザは、デフォルトでリンクを青、訪問したリンクを紫にし、テーブルに一定量の境界線とパディングを与え、H1、H2、H3 などに可変フォント サイズを適用し、ほぼすべてに一定量のパディングを適用します。ブラウザごとに送信ボタンの表示が異なるのはなぜだろうと思ったことはありませんか?

明らかに、これは、Web サイトをすべてのブラウザーで同じように見せる方法を理解できない CSS 作成者にとって、ある程度の頭痛の種になります。(注: なぜこれが誤った考えであるかについての記事は近日公開予定です!)

CSS リセットを使用すると、CSS 作成者はすべてのブラウザーですべてのスタイルを null にリセットするように強制できます。これにより、ブラウザー間の違いを可能な限り回避できます。

（ソース）

資力：

私はHTML5 resetを使用しています。これが私のお気に入りです。

その他の一般的に使用されるリセット手法は、 http://cssreset.com/のフロント ページにまとめて記載されてい ます。

于 2013-03-06T14:01:57.473 に答える
2

すべてのブラウザが HTML 要素を同じように扱うわけではありません。

ブラウザーによるスタイリングを元に戻すには、リセット css ファイルを使用する必要があります。（ CSSリセットの場合は単にグーグル）

この場合<body>、ブラウザの標準的なマージン/パディングを持つタグです。

body {
    margin:0;
    padding:0;
}
于 2013-03-06T14:05:39.303 に答える
0

使用する

html,body{
    padding:0px;
    margin:0px;
}

あなたはCSSに不慣れなようです。クロスブラウザ互換の設計では、CSSブラウザリセットを使用する必要がある場合があります。

于 2013-03-06T15:04:08.823 に答える