Проблема с IE6 - абсолютное позиционирование - PullRequest
Новая
       20

Проблема с IE6 - абсолютное позиционирование

4 голосов
/ 11 февраля 2009

Следующий HTML-код выглядит так, как требуется в Firefox 2 и 3 и IE7. Кнопка Left слева, кнопка Right справа, а текст посередине ... посередине!

Однако в IE6 кнопка Left не выровнена - она ​​выровнена по центру.

Может кто-нибудь подсказать почему ?? 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Layout problem!</title>
    <style type="text/css">
        DIV#Footer
        {
            padding: 10px;
            color: #fff;
            background-color: #484848;
            position: relative;
            text-align: center;
        }
        DIV#Footer INPUT
        {
            margin: 5px 15px;
            position: absolute;
            top: 0px;
        }
        DIV#Footer INPUT.right
        {
            right: 0px;
        }
        DIV#Footer INPUT.left
        {
            left: 0px;
        }
    </style>
</head>
<body>
    <div id="Footer">
        <input class="left" type="button" value="Left" />
        Some text in the middle
        <input class="right" type="button" value="Right" />
    </div>
</body>
</html>

(Я использовал инструмент разработчика IE, чтобы попытаться проанализировать и исправить это, но безрезультатно ...)

Ответы [ 6 ]

13 голосов
/ 11 февраля 2009

Вы должны вызвать свойство hasLayout (вещь IE ...) в #footer. Ширина и высота активируют его, если вы не хотите устанавливать ширину или высоту, вы можете использовать свойство zoom только для IE в CSS. 

<!DOCTYPE html>
<html>
<head>
    <title>Layout problem!</title>
    <style type="text/css">
        div#footer
        {
            padding: 10px;
            color: #fff;
            background-color: #484848;
            position: relative;
            text-align: center;
            zoom: 1;
        }
        div#footer input
        {
            margin: 5px 15px;
            position: absolute;
            top: 0;
        }
        div#footer input.right
        {
            right: 0;
        }
        div#footer input.left
        {
            left: 0;
        }
    </style>
</head>
<body>
    <div id="footer">
        <input class="left" type="button" value="Left">
        Some text in the middle
        <input class="right" type="button" value="Right">
    </div>
</body>
</html>

IIRC, в IE, элементы имеют два различных поведения макета, один, если hasLayout равен true, и другой, если это false. Убедившись, что он установлен на true, можно исправить множество странных проблем с макетом, подобных этой.

2 голосов
/ 13 февраля 2009

Как сказал Джонас.

Если есть сомнения, я рекомендую указывать ширину явно, даже если она не требуется, и я предпочитаю использовать это значение вместо «zoom», поскольку zoom не предназначен для устранения проблемы с макетом. Однако явная установка ширины не всегда возможна, поэтому «зум» помогает.

2 голосов
/ 11 февраля 2009

Попробуйте это (простите за встроенный стиль!) 

<div id="Footer">
    <div style="width:100%">
    <input class="left" type="button" value="Left" />
    Some text in the middle
    <input class="right" type="button" value="Right" />
    </div>
  </div>
0 голосов
/ 09 февраля 2010

Еще один вариант, который я нашел, работал для меня с абсолютно позиционными тегами div в ie6 - это добавление левого и правого значений в CSS.

Это простая математика, если вы знаете ширину div, с которыми вы работаете.

Кажется, чтобы "сшить" блок div на месте.

Я попробовал все другие предложения, которые я прочитал (включая javascript, чтобы заставить ie6 вести себя так, как ie7 или ie8), но они не сработали.

Решение выше сделал.

Удачи!

0 голосов
/ 12 февраля 2009

Я собираюсь предложить немного шансов для вашего подхода и посмотреть, повезет ли вам с этим: 

<style type="text/css">
    DIV#Footer
    {
        padding: 10px;
        color: #fff;
        background-color: #484848;
        position: relative;
        text-align: center;
    }
    DIV#Footer INPUT
    {
        margin: 5px 15px;
        position: absolute;
        top: 0px;
    }
    DIV#Footer INPUT.right
    {
        float: right;
    }
    DIV#Footer INPUT.left
    {
        float: left;
    }
    #Footer .center {
        float: left;
    }

</style>

Тогда в HTML 

<div id="Footer">
    <input class="right" type="button" value="Right" />
    <input class="left" type="button" value="Left" />
    <div class="center">Some text in the middle</div>
</div>

Затем вам нужно будет пройти и дать им поля, чтобы выстроить их так, как вы хотите. Это не сработает для макета с текучей средой, если вы не зададите для этих элементов нижний колонтитул или контейнер в нижнем колонтитуле фиксированной ширины.

0 голосов
/ 11 февраля 2009

Ваши плавающие / позиционированные элементы должны быть в порядке, прежде чем выровненный текст. Не располагайте их в порядке их появления.

Также вы можете добавить! Важное для увеличения приоритета и использовать панель инструментов Microsoft IE Developer, чтобы увидеть, какие правила вступают в силу. Какова ширина родительского элемента?

Похоже, все должно работать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...