Ошибка позиционирования <IE8 - почему? Лучший обходной путь? - PullRequest
Новая
       4

Ошибка позиционирования <IE8 - почему? Лучший обходной путь?

1 голос
/ 17 июня 2009

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

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

Для этих «правильных» браузеров это абсолютно позиционированное изображение должно иметь атрибут top, равный 59px, в отличие от 56px, который требуется для 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 и ниже?

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

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

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

1 Ответ

3 голосов
/ 17 июня 2009

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

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

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

<!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 имеет размер 59px, поэтому мы выбираем высоту 48, потому что 48 + 10px верхняя граница + 1px нижняя граница = 59px)

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

...