Якорь разделен на две части на IE7 - PullRequest
0 голосов
/ 19 октября 2010

Верх: IE8

Низ: IE7

alt text

Как вы исправляете IE7, чтобы он не разделял мой якорь на две части? Я знаю, display: block и float: left решит эту проблему, но я бы предпочел, чтобы он был встроенным. Таким образом, я могу иметь текст как слева, так и справа от любой произвольно расположенной кнопки привязки.

    #launchChrome {
        font-weight: bold;
        text-decoration: none;
        text-shadow: 0 1px 0 rgba(255,255,255,1);
        background: #eee;
        background: -moz-linear-gradient(center top, #fff, #cfd5e3);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #cfd5e3));
        border: 1px solid;
        border-color: #ccc #ccc #999 #ccc;
        -moz-border-radius: 0.4em;
        -webkit-border-radius: 0.4em;
        text-shadow: 0 1px 0 rgba(255,255,255,0.7);
        color: #666;
        font-size: 1.4em;
        padding: 0.2em 0.6em;
        margin: 0 0 0 1em;
        -moz-box-shadow: 0 0.1em 0.1em rgba(0,0,0,0.1);
        -webkit-box-shadow: 0 0.1em 0.1em rgba(0,0,0,0.1);
    }

<a id="launchChrome" href="javascript:void(0)" onclick="launch()">
            <img src="<?=base_url()?>images/spacer.gif" class="spriteChannel googleChromeSmall">
            Launch Chrome
        </a>

Ответы [ 3 ]

1 голос
/ 19 октября 2010

Я использовал display: inline-block, чтобы исправить это.

0 голосов
/ 19 октября 2010

Прежде всего закройте ваш тег img <img />.

Во-вторых - попробуйте добавить zoom:1 к #launchChrome - у меня нет точно такой же проблемы с рендерингом в IE7, но она исправленаоба IE6 / 7.У этого громкого триггера есть Layout.

0 голосов
/ 19 октября 2010

Почему даже использовать тег изображения для начала?

Используйте неповторяющееся фоновое изображение и установите для ссылки отступ слева, чтобы текст покрывал изображение.

...