7

それで、私はしばらくの間理解しようとしていた問題を抱えました。DOM構造に余分なテキストの行が表示されています（またはそう思われます）。これは、私が知る限り、ブラウザーによって追加されたものです。これは、コードを実行したすべてのブラウザー（IE8、IE9、Chrome 20、Firefox 11）で発生し、削除したいと思います。

これは私のHTMLです：

<div id="wrapper">
    <div id="inner">
        <div class="item">
            content
        </div>
    </div>
</div>​

そしてこれは私のCSSです：

#wrapper {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
.item {
    float: left;
    width: 171px;
    position: relative;
    background: #fc0;
}

そして、これが私の問題を示すjsfiddleです：http：//jsfiddle.net/henrikandersson/wMg2m/

ご覧のとおり、上部と黄色のアイテムの間にギャップがあります。これは、私が知る限り、そこにあるべきではない＃inner-divの上のテキスト行が原因です。

4

3 に答える 3

12

ラッパー div を&65279;閉じた後、目に見えない制御コマンドがあります。>実際には、HTML でエンコードされたバイト オーダー マークです。

それを削除するだけで問題ありません。

この更新された fiddleを参照してください。

于 2012-07-09T10:12:26.037 に答える
5

<div id="wrapper">目に見えない直後の特殊文字を取得しました。

したがって、これは機能します：

<div id="wrapper">
    <div id="inner">
        <div class="item">
            s
        </div>
    </div>
</div>

あなたが持っていたコードを再入力しました。これで問題が解決しました。

問題は、コピーして貼り付けたコード、またはテキスト エディターにある可能性があります。

Notepad++は、最高の無料の Windows テキスト エディターです。

Notepad++ で ANSI エンコードされたテキスト ファイルにコードを貼り付けたところ、問題が見つかりました。ANSI ではその文字を表示できないため、?.

于 2012-07-09T10:12:14.943 に答える
1

追加

#inner { float:left; }

http://jsfiddle.net/wnhqY/

于 2012-07-09T10:12:20.603 に答える