IE7：多行文本上的背景img

发布于 2024-11-01 01:11:50 字数 670 浏览 2 评论 0原文

在带有外部站点 URL 的锚标记上，我们有一个小图标，表明这是一个到外部站点的链接。现在，该图标通过链接文本周围的附加 span 元素包含在内，并通过 CSS 背景图像显示，位置 100% 50% 始终位于文本末尾，并为链接之间的文本间隙添加了 padding-right 现在下面的文本

在每个浏览器中都可以正常工作 - 只要链接文本不超过 1 行...如果它在多行上，整个事情在任何地方仍然可以正常工作，除了 IE7（该项目不支持 IE6)... IE7 在第一行末尾和底部几个像素处显示图标，而不是在第二行或第三行的链接/跨文本末尾...

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

HTML 代码：链接文本到多行< /code>

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

够钟 2024-11-08 01:11:50

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

回复收藏 0 原文

还给你自由 2024-11-08 01:11:50

多行背景是 IE7 的问题。在不添加额外标记的情况下执行所需操作的正确方法是使用 CSS ： after 但是 :after 在 IE6 或 7 中不受本机支持（IE8 中添加了支持）。如果您不介意使用 JavaScript 为 IE7 添加 :after 支持，那么您可以使用 ie7-js 库（另请参阅这个问题:after 和 :before IE 7 的 css 伪元素 hack)

使用该库，以下内容在 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>

Multi-line background is a problem for IE7. The correct way to do what you want, without adding extra markup, is to use CSS :after however :after is not supported natively in IE6 or 7 (support was added in IE8). If you don't mind using JavaScript to add :after support to IE7 then you could use the ie7-js library (also see this question :after and :before css pseudo elements hack for IE 7)

Using that library, the following is working for me in 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>

回复收藏 0 原文

~没有更多了~