3

機能しないコードを何時間も使用しましたが、問題を見つけることができませんでした。問題を単純化して見つけました。最後に、隠れたキャラクターを見つけました。見えなかったが、すべてがうまくいかないキャラクターです。

私は本当に驚いています。どなたかの参考になれば公開します。

この隠し文字は青い css の直後にあり、背後にあるものはすべて見えなくなります。誰かがそのスペースを削除すると、赤が表示されます!

3か所で公開しています。次の驚くべき問題を確認できます。

http://codepen.io/anon/pen/riKkn
http://dabblet.com/gist/3135074
http://jsbin.com/exokub/edit#html,live

私にとって、これは本当に衝撃的です。これを見つけるのに何時間も費やしました。なぜこれが起こるのか誰か知っていますか？すべてを破壊するこれらの隠された文字を可視化する方法はありますか?

CSS:

#blue {position: absolute;width: 200px; height:100px;top: 50px;left: 150px; background-color: blue;}​

#red {position: absolute; width: 200px; height:100px;top: 200px;left: 150px; background-color:red;}​

HTML:

<div id="blue"></div>
<div id="red"></div>
4

2 に答える 2

5

文字は UTF-8 ゼロ幅スペースです: e2 80 8b. CSS パーサーがこの文字に達すると、ファイルの読み取りを停止します。

解決策は、そもそもこれらを入れないことです。それらは CSS の一部としては有効ではありません。削除する必要がある既存のものがある場合は、16 進エディターでファイルを開いて、それらの位置を特定できます。

于 2012-07-18T09:13:05.533 に答える
2

いろいろ試した次第です。エラーを表示する 2 つの無料エディターを見つけました:
- TextWrangler: [表示] > [テキスト表示] > [非表示を表示] に移動すると、簡単に削除できる赤い ¿
- Aptana Studio: 境界線に赤い十字が表示され、空白の場所に点が表示されます。

この空白がどのように、またはなぜ表示されるのかはまだわかりません。プロジェクトが崩壊する可能性があり、どのバージョンを試しても、現在のエディター Dreamweaver でそれを見る方法がないため、私にとっては重要な問題でした。この空白は、JsFiddle、Jsbin、CodePen、Dabblet などの共同ツールでも検出できません。

私が言ったように、TextWrangler と Aptana は使いやすく、無料で解決できます。誰かが別の編集者や、私のような非専門家向けの簡単な方法を教えてくれるなら、知っておくとよいでしょう.

于 2012-09-01T14:42:28.300 に答える