3

Firefox 12 で奇妙な動作に出くわしました。次の HTML を検討してください。

<!DOCTYPE html>
<img src="resources/csv.png">
<img src="resources/globe.png">
<img src="resources/clock.png">
<img src="resources/key.png">
<img src="resources/delete.png">

これをレンダリングすると、最初の画像と 2 番目の画像の間に小さなスペースがあることに気付きます。すべての画像の周りで「テキスト選択」を行うと、それらの間に卑劣な小さな空白文字があることがわかります。

wtfspace

これの理由は思いつきませんが、代わりにすべてのボタンをリンクすることを意図しているので、それも試して効果があるかどうかを確認しました. 新しいコードは次のとおりです。

<!DOCTYPE html>
<a><img src="resources/csv.png"></a>
<a><img src="resources/globe.png"></a>
<a><img src="resources/clock.png"></a>
<a><img src="resources/key.png"></a>
<a><img src="resources/delete.png"></a>

ここでも、選択されたレンダリング出力が表示されます。各画像の後にスペースがあることに注意してください。

ここに画像の説明を入力

この癖の論理的な説明を思いつく人はいますか? HTML の問題ですか、それとも Firefox のバグですか? おそらくCSSを使用して、誰かが回避策を考えられますか? 私の最初の本能はマージンで遊ぶことですが、IE7 と互換性がある必要があります。正しく思い出せば、負のマージンでは機能しないと思います。どうもありがとう。

編集：おっと。HTML では改行がスペース文字に変わるのを忘れていました。それでも、回答者に感謝します。:)

4

2 に答える 2

4

それらをすべて1行に入れると修正されます。

<img src="resources/csv.png"/><img src="resources/globe.png"/><img src="resources/clock.png"/><img src="resources/key.png"/><img src="resources/delete.png"/>

しかし、それは面倒な場合があります。読みやすさを維持したい場合は、次のようにすることができます...

   <img src="resources/csv.png"/><!--
--><img src="resources/globe.png"/><!--
--><img src="resources/clock.png"/><!--
--><img src="resources/key.png"/><!--
--><img src="resources/delete.png"/>
于 2012-05-23T17:58:48.270 に答える
3

空白はキャリッジ リターンです。それを取り除くと、あなたは黄金になります！

<img src="one.jpg"><img src="two.jpg">

また

<a href="#"><img src="one.jpg"></a><a 
href="#"><img src="two.jpg"></a>

通常、その空白を取り除く必要があるときにhtmlでマークする方法です。

于 2012-05-23T17:49:52.443 に答える