IE7: background-img для многострочного текста - PullRequest
Новая
       20

IE7: background-img для многострочного текста

0 голосов
/ 12 апреля 2011

На якорном теге с URL-адресом внешнего сайта у нас есть небольшой значок, который указывает, что это ссылка на внешний сайт.Теперь этот значок включен через дополнительный элемент span вокруг текста ссылки и отображается с помощью CSS background-image с позицией 100% 50%, чтобы всегда быть в конце текста и с отступом вправо для разрыва текста между ссылками.и следующий текст

теперь это прекрасно работает в любом браузере - до тех пор, пока текст ссылки не длиннее 1 строки… если он состоит из нескольких строк, все это работает по-прежнему хорошо везде, кроме IE7IE6 не поддерживается проектом)… IE7 отображает значок в конце первой строки и в нескольких пикселях внизу, а не в конце текста ссылки / span во второй или третьей строке…

Иногда картинка произносит более 1000 слов: http://img859.imageshack.us/i/spdexternalerror.jpg/

HTML-код: <a href="#"><span class="external">Link-Text to multiple lines</span></a>

CSS для элемента span: {background: url(/#/icon-new-window.png) no-repeat center right; padding-right: 14px;}

Ответы [ 2 ]

1 голос
/ 12 апреля 2011

Многострочный фон - проблема для IE7 .Правильный способ сделать то, что вы хотите, без добавления дополнительной разметки, это использовать CSS :after, однако :after изначально не поддерживается в IE6 или 7 (поддержка была добавлена ​​в IE8).Если вы не возражаете против использования JavaScript для добавления поддержки :after в IE7, то вы можете использовать библиотеку ie7-js (см. Также этот вопрос : after и: before псевдоэлементы css взломать для IE7 )

Используя эту библиотеку, в 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>
1 голос
/ 12 апреля 2011

добавление zoom:1 Свойство CSS решает эту проблему в большинстве ситуаций

...