2

サイトの開発に奇妙な問題があります。

私のコンピュータのどのブラウザも、ページのいくつかの要素の上にスペースを追加します(たとえば、ナビゲーションバー、ナビゲーションバーのドロップダウン、コンテナなどの上)。Chrome 開発者ツールでは、奇妙なtext要素 (空白のある引用符) を持つように表示されます。1

ただし、ソースコードではそれなしで表示されます: 2

その引用符をツールから削除すると、間隔が消えます。

その引用符 (スペース) は Javascript や PHP では追加できません: すべてのスクリプト インクルードにコメントを付け、.htmlファイルの php 前処理を無効にしても存在します ( example )。この間隔は CSS では追加できません。たとえば、navbar には次のルールがあります。

.navbar {
  margin-top: 0;
}

間隔は、私のコンピューターのすべてのブラウザーに存在します (Firefox、Chrome、IE 9 でテスト済み)。

さらに、Firefox Dev Tool は引用符を表示しません。 3

ただし、Chrome Dev Tool で引用符で囲まれている場所のコードにスペースを追加します。

それで、それは何ですか?この間隔を削除するにはどうすればよいですか (負のマージンのような醜いソリューションを使用したくありません)。

あなたのマシンにこの問題がありますか?ありがとう。

4

3 に答える 3

6

スペースは「特別なスペース」のように思えます 。テキストエディタでも、通常のスペース文字のように見える場合があります

HTML構造を生成するコードを見てください。次に、リクエストのスペースを削除します。スペースバーキーを使用して、フォーマットスペースを元に戻します。


編集

私が気付いたテキストエディタをよく見ると、コードに特殊な発音区別符号が含まれています。

<Notepad ++エディターから私の画面を見ると、の文字( )未満と私が赤でマーク<nav>した<li>タグに小さな「フック」があります。

スペースを削除するだけでなく、小なり文字(<)も削除して、キーボードを使用して再入力します。

ここに画像の説明を入力してください

于 2012-09-07T14:58:26.660 に答える
3

<body>と要素の間の文字は、<nav>改行とBOM-バイト順マーク(別名ゼロ幅の非区切りスペース)U + FEFF(UTF-8のEF BB BF)です。ヘキサエディタNeoから取られた以下の画像を参照してください

ここに画像の説明を入力してください

削除する必要があるのはBOMです。

于 2012-09-07T15:27:52.083 に答える
1

<body>ソース HTML のとの間に空白があります<nav>。それをなくす唯一の方法は、次のように 2 つのタグを一緒に実行することです。

<body><nav class="..."> ... </nav></body>

HTML では、属性値の外側にある一連の空白は 1 つのスペースとして扱われることが規定されているため、改行であるかどうかなど、空白がどれだけあるかは問題ではありません。HTML に単一のスペース文字がある場合でも、適合ブラウザは、それをテキスト ノードとして扱う必要があります。Chrome が引用符を表示することで示唆するのは、これらのテキスト ノードです。

于 2012-09-07T14:46:57.260 に答える