Ошибка определения местоположения <IE8 - Почему? Лучшее обходное решение?

Я заметил, что сайт, который я поддерживаю, имел небольшую ошибку макета в FF / IE8 / Chrome (например, на этой странице ) - изображение в верхней левой руке было немного высоким, заблудившись в заголовке вверху.

Я задавался вопросом, почему я не заметил этого, когда занял сайт, но я понимаю, что только с тех пор, как я обновил IE7 до IE8, стало очевидно, что проблема уже давно существует в «правильных» браузерах.

Для этих «правильных» браузеров это абсолютно позиционируемое изображение требует, чтобы верхний атрибут был установлен на 59 пикселей, а не на 56 пикселей, что требуется IE7 (и ниже).

Решение легко, но а) я хочу сначала понять проблему, и б) я хотел бы рассмотреть ряд решений (я знаю, что их будет несколько). С этим в мыслях...

  • В чем причина проблемы?

Многие проблемы с позиционированием были вызваны ошибочной моделью IE-бокса, но я думал, что это было исправлено IE7. Это проблема с моделью коробки, которая по-прежнему влияет на IE7 или это что-то другое?

  • Какое лучшее решение?

Ряд источников полагают, что использование комментариев условий для включения файла CSS-патча IE7 - это путь:

<!--[if lte IE 7]>
 <link href="IE7Fix.css" rel="stylesheet" type="text/css">
<![endif]-->

Прямо, но я бы предпочел не вставлять это в заголовок каждой отдельной страницы на сайте (но, конечно, я буду, если придется).

Я знаю, что есть многочисленные хаки CSS, которые, вероятно, могут выполнять эту работу, но есть школа, которая говорит, что CSS следует избегать, потому что их сложнее поддерживать, особенно по мере появления новых браузеров. Я могу, конечно, сочувствовать этому мышлению; однако этот сайт полностью перерабатывается в течение 3 месяцев, поэтому я рассматриваю краткосрочное решение. Если бы я решил использовать CSS-хак, что мне нужно сделать, чтобы изменить поведение для IE7 и ниже?

Я также прочитал, что хорошие таблицы стилей сброса могут избежать многих из этих проблем, поэтому для смеха я применил таблицу стилей сброса перезагрузки Eric Meyer Reloaded, как и ожидалось, это значительно урезало сайт.

Итак, чтобы понять, в чем именно проблема; каково наилучшее долгосрочное решение, и какое решение было бы проще всего развертывать, дать кратковременный характер проблемы?

CSS ('Banner02'): http://new.eminox.com/_lib.css/content.css

css,internet-explorer,positioning,

1

Ответов: 1

3 принят

На самом деле, я думаю, что ваша проблема не связана с позиционированием «banner02», а с высотой «banner01» div сверху. Я открыл сайт в FF и IE7 и выстроил верхний край страницы. Изображение «banner02» находится в точно такой же позиции по высоте, но заголовок div «banner01» был выше в одном браузере, чем другой. Я также думаю, что IE7 работает в режиме «quirks», который слегка менял модель коробки.

Чтобы сделать FF и IE7 одинаковыми (извините, у меня нет IE8, и это мой рабочий ПК, поэтому я не могу пойти, чтобы проверить их все), я сделал 2 изменения:

1) измените DOCTYPE на: <- это, вероятно, не обязательно. см. мой комментарий ниже.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

чтобы:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2) определить высоту для «banner01», потому что ни один из них не был установлен ранее (в Global.css):

.banner01 {
  width: 770px;
  height: 48px;
  background-color: white;
  border-color: #555555;
  border-style: solid;
  border-width: 10px 0 1px 0;
}

(баннер 02 находится на 59 пикселей, поэтому мы выбираем высоту 48, потому что 48 + 10px верхняя граница + 1px нижняя граница = 59 пикселей)

Это очистило его для меня ... но опять же, я тестировал его только в двух браузерах. Надеюсь, это поможет!

CSS, интернет-исследователь, позиционирование,
Похожие вопросы
Яндекс.Метрика