Процентное расположение не добавляется в IE6 - PullRequest
Новая
       10

Процентное расположение не добавляется в IE6

0 голосов
/ 18 декабря 2009

IE6, конечно, вызывает у меня проблемы. У меня проблемы с моим макетом с использованием процентов. Код у меня выглядит следующим образом: 

    <div style="width: 92%; margin-left: 4%; margin-right: 4%; background-color: red; height: 20px;">
        <div style="display: inline; float: left; margin-left: 1%; margin-right: 1%; width: 23%; background-color: blue; height: 20px;"></div>
        <div style="display: inline; float: left; margin-left: 1%; margin-right: 1%; width: 73%; background-color: yellow; height: 20px;"></div>
    </div>

Таким образом, внутренние два элемента div имеют поля справа и слева в 1%, то есть в общей сложности 4% полей. Тогда ширина составляет 23% и 73% для общей ширины 96% для внутренних элементов. Таким образом, складывая поля и ширину вместе, мы получаем хорошие 100%.

Но IE6 по какой-то причине не соглашается, и ломает два моих внутренних блока и помещает каждого на новую строку. Кто-нибудь знает почему? Это работает для любого другого браузера. Я позаботился обо всех ошибках IE6, о которых мог подумать. Дисплей: inline должен позаботиться об ошибке двойного поля, и это не проблема.

Вот URL, если кто-то хочет увидеть его в действии: http://dev1.twinmed -dev.com / test.html

Спасибо за любую помощь!

Ответы [ 2 ]

0 голосов
/ 04 февраля 2010

IE6 является мусором в процентах, когда в режиме стандартов.

Статья positioniseverything , вероятно, является одной из самых нечитаемых в Интернете, но простой ответ заключается в том, что простого ответа не существует.

Ширина 99% решит проблему, но любой, кто работает над макетом дизайнера, не сможет допустить такого рода ошибки.

Мое решение состоит в том, чтобы рассчитать проценты самостоятельно, используя выражения, в вашей таблице стилей IE.

Мой тестовый пример такой: 

<!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" xml:lang="en-gb" lang="en-gb">
<head></head>
<body>
    <div style="width:50%;float:left">Left</div>
    <div style="width:50%;float:left">Right</div>
</body>
</html>

, который прыгает по всему магазину при изменении размера окна браузера.

И я могу изменить его для IE6 следующим образом: 

<!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" xml:lang="en-gb" lang="en-gb">
<head></head>
<body>
    <div style="width:expression(this.parentNode.offsetWidth/2);float:left">Left</div>
    <div style="width:expression(this.parentNode.offsetWidth/2);float:left">Right</div>
</body>
</html>
0 голосов
/ 18 декабря 2009

IE6 плохо разбирается в процентах о размере проблемы:

http://www.positioniseverything.net/explorer/percentages.html

Вы заметите, что если вы медленно изменяете размер окна в IE6 и страница переворачивается, то время от времени ваши 2 div'а будут волшебным образом располагаться на той же строке, что и вы.

Я всегда находил хороший надежный обходной путь для этой проблемы (за исключением того, что не использовал проценты), чтобы убедиться, что общее значение всегда составляет 99%. Очевидно, что иногда это может поставить под угрозу компоновку, но использование правила IE6 с условными комментариями сводит эффект к минимуму.

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

Нет похожих вопросов

...