Проблема с отображением веб-сайта IE6 (фон или проблема с заполнением?) - PullRequest
Новая
       16

Проблема с отображением веб-сайта IE6 (фон или проблема с заполнением?)

0 голосов
/ 06 октября 2009

Я пытаюсь заставить сайт правильно отображаться в IE6 и IE7. Вот скриншот того, как это выглядит в IE6.

альтернативный текст http://img225.imageshack.us/img225/4779/screenshot20091006at239.png

IE8, Safari, Firefox и т. Д. Все отображают этот сайт правильно. Может ли кто-нибудь дать мне подсказку о том, что вызывает искажения в IE6?

Если вы хотите взглянуть на страницу источника, сайт: www.devaswami.com

Получить CSS от здесь .

Ответы [ 4 ]

2 голосов
/ 06 октября 2009

Вы используете таблицу автоматического размещения для панели навигации, и у нее есть colspans. Это сбивает с толку IE, который не очень хорошо понимает, какими должны быть большие таблицы, когда есть colspans. Это делает таблицу шире, чем вам нужно, что делает ваши клетки шире, чем ожидалось, что делает уродливый желтый фон просвечивающим и не выравнивается.

Чтобы исправить это, установите стиль table-layout: fixed; width: 970px; для элемента таблицы и добавьте по одному элементу <col> для каждого столбца, каждый со стилем width: ...px, который точно указывает IE, насколько велик размер каждого столбца. Тогда он не может делать никаких ошибок (а также большие фиксированные макеты таблиц отображаются быстрее).

Чтобы исправить это, удалите таблицу макетов и используйте позиционные div для ссылок навигации. Тогда вы также можете потерять глупую нарезку изображения и иметь один GIF для всего фона заголовка с фотографией и ссылками, расположенными поверх этого.

(Также стоит исправить ошибки проверки как в HTML, так и в CSS. Вы используете // в качестве однострочного комментария в вашей таблице стилей, но в CSS такого нет; вы только запутаете парсер в правила сбрасывания.)

0 голосов
/ 06 октября 2009

Возможностей много, и сложно догадаться, основываясь на скриншоте. Однако один большой шаг к тому, чтобы IE 6 и 7 работали лучше, - объявить тип документа в верхней части документа: 

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

Это для HTML 4.01, вам нужно обновить его, чтобы он соответствовал тому, что вы конкретно используете, если это не HTML (то есть XHTML). Это само по себе помогает с некоторыми из основных проблем, но не со всеми. Если этого не произойдет, Google "IE6 css hacks", и вы найдете много потенциальной информации, которая может относиться к вашему контексту.

0 голосов
/ 06 октября 2009

Редактировать: я предлагаю вам исправить ошибки, связанные с отсутствующими / неправильными конечными тегами:

Строка ошибки 199, столбец 194: конечный тег для элемента "а", который не открыт

Ошибка, строка 200, столбец 49: конечный тег для элемента "p", который не открыт

Источник: http://validator.w3.org/check?uri=http%3A%2F%2Fdevaswami.com%2F&charset=(detect+automatically)&doctype=Inline&group=0

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

Оригинальный ответ:

Попробуйте применить haslayout к каждому элементу и использовать display:inline для любого плавающего элемента: 

#nav li { display:inline; } /* the selector *must* be floated and have horizontal margins in the direction of the float. */

* { zoom:1; }

Для всего, что было исправлено масштабированием: 1, примените ширину / высоту, и это вызовет hasLayout.

Хотя это может быть полезно, если вы действительно разместили некоторый исходный код.

0 голосов
/ 06 октября 2009

Ммм, с первого взгляда, у вас есть что-то, что осталось с плавающей точкой, и у вас осталось поле? 

#foo {
  float: left;
  margin-left: 20px; //20px in all browsers except IE6 where it will be 40px;
  display: inline; //this will fix this issue
}
...