Как мне добиться единого макета во всех браузерах?

Question

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

В данный момент я пытаюсь улучшить поле "My Alarms" после входа в систему (только не пытайтесь взломать мой сайт, он все еще очень нестабилен).

Вопрос

Какие уловки, советы, подсказки и т. Д. Вы можете дать мне, чтобы обеспечить совместимость макетов в разных браузерах?

Answer 1

Я считаю, что лучший способ избежать боли - следовать этим правилам:

1. Создайте более совместимый и удобный для разработчиков браузер, такой как Firefox, сначала тщательно проверяйте его в IE (и safari / chrome (webkit) и opera).
2. Используйте строгий тип документа - вам не обязательно нужна совершенная разметка, но она должна быть очень хорошей & mdash; достаточно хорош для того, чтобы избежать режимов причуд в браузере, поскольку причуды по определению не являются стандартными
3. Использовать таблицу стилей сброса . Обратите внимание, что в зависимости от содержимого листа этот элемент может быть несовместим с целью # 2.
4. Используйте инфраструктуру javascript, такую ​​как jQuery или Prototype, - они могут скрывать некоторые несовместимости javascript и DOM.
5. Используйте хорошую семантическую разметку - скорее всего, она будет плохо работать в браузере с плохим поведением
6. Примите, что это не будет идеально, и не переживайте по-настоящему малые отклонения

Следуйте этим правилам, и в первую очередь проблем не так много.

Ссылка на TODO приведена в следующем вопросе:
https://stackoverflow.com/questions/72394/what-should-a-developer-know-before-building-a-public-web-site

Answer 2

Вам нужен правильный тип документа, чтобы страница отображалась в режиме соответствия стандартам.

W3C: рекомендуемый список DTD

Соблюдайте стандарты, насколько это возможно. Это то, для чего созданы браузеры, так что это лучшая точка соприкосновения, которую вы можете найти. Кроме того, это то, что браузеры будут следовать в будущем, так что вы получите лучший прогноз того, как должен выглядеть код для работы с будущими версиями браузера.

При сборке сначала протестируйте страницу в браузере, который не является Internet Explorer. Если вы сначала соберетесь для IE, вы будете полагаться на ошибки рендеринга, а затем у вас возникнут большие проблемы с тем, чтобы он выглядел одинаково в браузерах, в которых нет таких ошибок. Firefox - это самый распространенный браузер без IE, а также один из самых нейтральных в отношении соблюдения стандартов.

Надстройка Firebug для Firefox позволяет точно видеть, какие стили применяются к каждому элементу, а также настраивать стили в реальном времени, так что это очень удобный инструмент.

Постарайтесь сделать макет настолько простым и надежным, насколько это возможно, и придерживайтесь исходной семантики html, если это возможно. Поисковые системы ищут контент в элементах, для которых он предназначен, например, заголовок в теге h1 и текст в теге p, поэтому, следуя первоначальному назначению разметки, вы делаете свою страницу более заметной в Интернете. .

Возможно, вам придется добавить несколько дополнительных стилей, чтобы подавить причуды в IE, например, указать высоту для элементов, которые должны сами определять свою высоту, добавив display: inline; к плавающим элементам (которые все еще будут блочными элементами), чтобы управлять внутренними флагами рендеринга IE, или используя overflow: hidden, чтобы подавить побуждение IE сделать все элементы как минимум одним символом. В любом случае используйте отступы, а не поля, поскольку в IE возникают проблемы с корректным сжатием полей.

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

Answer 3

Дизайн и тестирование на FireFox ...

Затем внесите несколько изменений, необходимых для работы в IE.

Я парень из IE, но это сводит меня с ума, когда у меня это хорошо выглядит в IE, и тогда Firefox понимает это правильно / неправильно. Я понимаю, что Firefox ближе к стандартам, но IE делает хорошие предположения ... так что

ARGH! )

Answer 4

В дополнение к ответу Джоэля я обнаружил, что это помогает максимально упростить задачу. Кроме того, использование div-упаковок очень помогает - вы можете применять простые стили к оболочкам, которые должны работать во всех браузерах.

Answer 5

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

Answer 6

Я усердно работаю над тем, чтобы дизайн моего сайта был кросс-браузерным. Мой процесс выглядит следующим образом:

1. Нарисуйте черновую идею макета в фотошопе. или даже на листе бумаги.
2. Макет снимка экрана в фотошопе (вставьте сюда любимый фоторедактор).
3. Начните строить сайт на основе вышеуказанного дизайна.
4. Определите, какие браузеры важны для совместимости.
5. Тестируйте сайт при каждом значительном изменении дизайна с помощью этих браузеров
6. Есть несколько CSS-хаков , которые я был вынужден использовать inorder, чтобы заставить работать все целевые браузеры. Я стараюсь не опускаться до них, так как они могут иметь более неожиданные побочные эффекты в будущей версии браузера.
7. Последний шаг - проверка конечного продукта во всех тестовых браузерах. Там будут небольшие различия, здесь вам нужно решить, когда провести черту. Потому что много времени можно легко потратить, толкая пиксели.

Вообще говоря, я нацеливаюсь на 4 лучших браузера: IE-7, IE-8, FF, Chrome & Safari. Недавно я использовал CSS-хак для исправления проблемы с IE-7:

width: 50px;
*width: 45px;  /* IE-7 Hack */

Это работает с использованием небольшого количества недопустимого CSS (*), другие перечисленные браузеры будут правильно игнорировать этот хак, но IE-7 его читает. Как читается последний применяется

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

Answer 7

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

Хорошо

Answer 8

Мой билет в забвение: Используйте вложенные таблицы для дизайна. Другой метод: просто создайте свой сайт в виде большого изображения вместо HTML. Недостатком является то, что это медленно и ограничивает функциональность.