FirefoxとIEで不必要な埋め込みを表示するテーブルセル

Question

私は2つのテーブルセルを持っています。最初のものにはリンクと画像（「CollegiateLink」）が含まれています。第二は、送信ボタン（「有料会費」）用の画像と形態含ま：FirefoxとIEで

を上記のように、細胞は、不要なパディングを持っています。 Chromeではうまく表示されます。どうしてこれなの？

はここで、表の行のソースです：問題の

<tr> 
    <td> 
     <a href="https://utsa.collegiatelink.net/organization/sigmakappaupsilonhonorsociety"> 
     <img src="http://a6.sphotos.ak.fbcdn.net/hphotos-ak-ash4/396010_343796938973248_154024167950527_1347540_1267421848_n.jpg" onMouseOver="this.src='http://a4.sphotos.ak.fbcdn.net/hphotos-ak-snc7/404415_343796945639914_154024167950527_1347541_548420198_n.jpg'" 
      alt="CollegiateLink" onMouseOut="this.src='http://a6.sphotos.ak.fbcdn.net/hphotos-ak-ash4/396010_343796938973248_154024167950527_1347540_1267421848_n.jpg'" /> 
     </a> 
    </td> 
    <td> 
     <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank"> 
     <input type="hidden" name="cmd" value="_s-xclick"> 
     <input type="hidden" name="hosted_button_id" value="UVBXKLNNGX8GL"> 
     <input type="image" src="http://a2.sphotos.ak.fbcdn.net/hphotos-ak-ash4/382615_343796955639913_154024167950527_1347542_331738916_n.jpg" onMouseOver="this.src='http://a8.sphotos.ak.fbcdn.net/hphotos-ak-snc7/396479_343796968973245_154024167950527_1347543_1793145374_n.jpg'" 
      onMouseOut="this.src='http://a2.sphotos.ak.fbcdn.net/hphotos-ak-ash4/382615_343796955639913_154024167950527_1347542_331738916_n.jpg'" border="0" name="submit" 
      alt="PayPal - The safer, easier way to pay online!"> 
     <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1" style="position: absolute; bottom: 0; right: 0;"> 
     </form> 
    </td> 
</tr> 

A（非）作業の例では、ここで見つけることができます：http://www.facebook.com/sky.utsa

「支払うので、私はイメージマップを使用することはできませんDues "画像はアンカータグではなくフォーム要素です。明示的に高さを設定してみましたが、成功しませんでした。何か案は？

Answer 1

Firefoxで問題の原因となっている2つの<td>要素をマージして、ボタンとフォームを横に並べて配置することができます。代わりの

：

<tr> 
    <td> 
     <a href="#"> 
     <img src="image.jpg"/> 
     </a> 
    </td> 

    <td> 
     <form target="_blank" method="post" action=""> 
     <!-- form stuff here --> 
     </form> 
    </td> 
</tr> 

はこれを試してみてください：

<tr> 
    <td> 
     <a href="#" style="float:left;"> 
     <img src="image.jpg"/> 
     </a> 

     <form target="_blank" method="post" action="" style="float:left;"> 
     <!-- form stuff here --> 
     </form> 
    </td> 
</tr> 

Answer 2

問題は、あなたのHTMLの書式設定によって引き起こされます。 W3Cの仕様はこの問題では不明ですが、インライン要素は、コードの書式設定に使用する空白要素を常に無視するわけではありません。白いスペースを1文字に崩壊させるかもしれませんが（それが非破壊スペースでない限り）、まだそこにあります。

問題

が今、あなたのコードは次のようになります。

<a href="..."> 
    <img src="..."/> 
</a> 

あなたは、これが同じでなければなりませんと思うかもしれない：

<a href="..."><img src="..."/></a> 

が、そうではありません。残念ながら、W3C specsは特にので、いくつかのブラウザでは、それらをレンダリングします、終了タグの直前に開始タグまたは即時の後に空白を無視するか、レンダリングするためのいずれかのユーザーエージェントを必要としない

<a href="..."> <img src="..."/> </a> 

：それは次のようにFirefoxを使って解釈されています完全には無視されるものもあれば無視するものもあります。

あなたの場合は、後者です。空白は実際にレンダリングされません（少なくとも水平ではありません）が、imgタグはテキストブロック内でレンダリングされるものとして扱われます。表示される余分な垂直方向のスペースは、テキストブロックのベースラインに対するimgの垂直方向の配置によって発生します。

ソリューション

は今、私はvertical-align問題に本当に良い行ったことがないが、この問題にはいくつかの解決策があります。

1. あなたはimgタグにvertical-align: topを簡単に設定することができますが。
2. コードの書式を取り除いて、の両側の空白を取り除くことができます。
3. font-sizeは、1pxのような非常に小さなものに変更できます。
4. 要素をスライスでレンダリングする代わりに、コンテナに適切な背景画像（例：table）を使用することができます。個人的に

、文体と実用的な理由から、私はaのようなインライン要素の場合は2と4の両方を行うだろう、それは空白で内容をパディングだけでなく安全です。適切な背景を使用するということは、ピクセル完全アラインメントについて心配する必要がないことを意味します。とイメージサイズを縮小できます。この場合はテーブルを使用しませんが。

Answer 3

テーブルの下の<td>要素の画像でこの問題が発生しました。 Firefoxでは、画像の下に追加の2pxが表示されていました。 （IEはOKだった。）

とにかく、私はこの興味深いページに上陸した：画像はテキストのベースライン（どうやら）に座っていたと私はイメージ

​​