アンカー要素のIEレンダリングが不正です

IEのアンカー要素レンダリング（私の場合はIE9）に問題があります。下にリンクされている画像を見ると、2番目の要素のために一種の不良な埋め込みや位置のずれがあることがわかります。同様の質問で私は解決策としてa { display: inline-block }を見つけましたが、それは私にとってはうまくいかないようです。しかし、私はいくつかのCSSプロパティ（clearまたはheightなど）を使って遊んでいることに気付きました。明らかにロジックがないと、レンダリングが正しくなる可能性があります。ありがとう！アンカー要素のIEレンダリングが不正です

IE9 Bad Rendering

<!DOCTYPE html> 

<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Title</title> 
     <style> 
      body {font-family:sans-serif; font-size:12px;} 
      a {height:13px;} 
      p {clear:both; float:left;} 
      .link {clear:both; float:left; border:1px solid #00f; background-color:#0f0;} 
     </style> 
    </head> 
    <body> 
     <p>TEXT</p> 
     <a class="link" href="my_page.html">ABCDEF</a> 
     <p>TEXT</p> 
     <a class="link" href="my_page.html">ABCDEF</a> 
     <p>TEXT</p> 
     <a class="link" href="my_page.html">ABCDEF</a> 
     <p>TEXT</p> 
     <a class="link" href="my_page.html">ABCDEF</a> 
    </body> 
</html>

出典

2011-07-24 mt22

画像は私のために[OK]を探します。 <p>を使用して、私が見ている 'パディング'を生成しています。行間に空白を入れたくない場合は、すべてを同じ<p>タグの中に入れます。

... 
    <p> 
    TEXT<br /> 
    <a class="link" href="my_page.html">ABCDEF</a></ br> 
    TEXT<br /> 
    <a class="link" href="my_page.html">ABCDEF</a></ br> 
    TEXT<br /> 
    <a class="link" href="my_page.html">ABCDEF</a></ br> 
    TEXT<br /> 
    <a class="link" href="my_page.html">ABCDEF</a> 
    </p> 
    ...

しかし、私はむしろ、データ

出典

2011-07-24 10:31:06 Riskz

おかげで、私は唯一のdiv要素とアンカーが使用されている他のいくつかの例があります。これを見て「パディング」の問題は同じです。それを修正するもっと一般的な方法はありませんか？ – mt22

コードのサンプルをhttp://jsfiddle.netに更新できますか？ – Riskz

これをIE9（http://jsfiddle.net/JHzbs/）で実行すると、2番目の要素をもう一度見てください。1pxにパディングがありません。 – mt22

新バージョンのようなものを表示するためにリストを使用します、http://jsfiddle.net/yAumT/11/

出典

2011-07-24 10:34:58 kleinohad

助けてくれてありがとう – mt22

アンカー要素のIEレンダリングが不正です

答えて

関連する問題