Question

在带有外部网站网址的锚标记上，我们有一个小图标，表示这是指向外部网站的链接。现在，这个Icon通过链接文本周围的附加span元素包含在内，并通过CSS background-image显示，位置100％50％始终位于文本末尾，填充右侧为文本间隙以及以下文字

现在这在每个浏览器中都能正常工作 - 只要链接文本不超过1行...如果它在多行上，除IE7外，整个过程仍然可以正常工作（项目不支持IE6））... IE7在第一行的末尾显示了Icon，在底部显示了几个像素，而不是在第二行或第三行的链接/ span-text的末尾显示...

有时一张照片说的超过1000个字：http://img859.imageshack.us/i/spdexternalerror.jpg/

HTML代码：<a href="#"><span class="external">Link-Text to multiple lines</span></a>

CSS到span-element：{background: url(/#/icon-new-window.png) no-repeat center right; padding-right: 14px;}

Answer 1

添加zoom:1 CSS属性可在大多数情况下解决此问题

Answer 2

多行背景为problem for IE7。在不添加额外标记的情况下执行所需操作的正确方法是使用CSS :after但是IE6或7中不支持:after（在IE8中添加了支持）。如果您不介意使用JavaScript向IE7添加:after支持，那么您可以使用ie7-js库（也请参阅此问题:after and :before css pseudo elements hack for IE 7）

使用该库，以下内容适用于IE7。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style type="text/css">
        p {
            width:100px;
            border:1px dashed blue;
        }

        a.external:after {
          content:url(http://www.knowledgewand.com/images/icon_new_window.gif);
        }
    </style>
    <!--[if lt IE 9]>
        <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
    <![endif]-->
</head>
<body>
    <p>
        <a href="#" class="external">Link-Text to multiple lines</a>
    </p>
</body>
</html>

IE7：多行文本的背景图像

2 个答案: