Неизвестная проблема с позиционированием в IE и некоторыми CSS - PullRequest
Новая
       4

Неизвестная проблема с позиционированием в IE и некоторыми CSS

2 голосов
/ 25 июня 2011

Ну, у меня есть две кнопки, каждая из которых находится в промежутке, и одна должна располагаться поверх другой, нижняя - над текстом, и все они справа от одного большого изображения. Но в Internet Explorer изображения и текст не складываются.

Firefox: http://i.stack.imgur.com/Uo9SX.png

Internet Explorer: http://i.stack.imgur.com/cENPC.png

Это текущий код: 

    <span class="block">
        <img src="images/application.png" alt="Screenshot" width="569px" height="285px">
    </span>
    <span class="block">
        <a href="portable"><span id="button_portable"></span></a><br>
        <a href="installer"><span id="button_installer"></span></a><br>
        <a href="http://download.microsoft.com/download/1/B/E/1BE39E79-7E39-46A3-96FF-047F95396215/dotNetFx40_Full_setup.exe"><span style="font-size:1em">(Requires .NET framework 4.0)</span></a><br><br>
        <a href="/changelog.php"><span style="font-size:1.3em">Changelog</span></a>
    </span>

И CSS: 

    span.block {
        display: inline-block;
        padding: 20px;
        vertical-align: middle;
    }
    span[id="button_portable"], span[id="button_installer"] {
        background: url("images/download.png") no-repeat scroll 0 0 transparent;
        float: left;
        height: 70px;
        margin-bottom: 10px;
        width: 250px;
    }
    span#button_installer {
        background-position: 0 0;
    }
    span#button_installer:hover {
        background-position: 0 -71px;
    }
    span#button_portable {
        background-position: 0 -142px;
    }
    span#button_portable:hover {
        background-position: 0 -213px;
    }

Я просмотрел несколько изменений и перепробовал их все, но ни одно из них не помогло.

Ответы [ 2 ]

1 голос
/ 25 июня 2011

Заменить float: left; на display: inline-block;.

См. демонстрационная скрипка .

Протестировано на Win7 в IE7, IE8, IE9, Chrome 12, FF 4.

0 голосов
/ 25 июня 2011

Сброс CSS Эрика Мейера обычно считается лучшим сбросом CSS.

Цель сброса CSS - предоставить «отправную точку», чтобы все браузеры запускались с одинаковыми настройками по умолчанию.Это приводит к тому, что страницы отображаются в разных браузерах одинаково, без необходимости специальных взломов для каждого браузера, определенной «ошибки» CSS или разницы между name-a-version-of-IE и every-single-other-browser

...