Question

我在IE中使用锚元素渲染时遇到了一些麻烦（在我的情况下是IE9）。如果你看下面链接的图像，你会发现第二个元素有一些不好的填充或错误的定位。在类似的问题中，我发现a { display: inline-block }是一种解决方案，但它似乎对我不起作用。但是我注意到玩了clear或height或其他一些CSS属性，显然没有任何逻辑，渲染可能是正确的。谢谢！

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>

Answer 1

图像对我来说很合适。使用<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>
    ...

但我宁愿使用列表来显示那种数据

Answer 2

新版本：请看：http://jsfiddle.net/yAumT/11/

IE为锚元素渲染不好

2 个答案: