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

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

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

Вопрос

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

Ответ 1

Я считаю, что наилучшая политика во избежание боли заключается в соблюдении следующих правил:

Создайте более удобный и удобный для разработчиков браузер, например firefox, тщательно протестируйте его в IE (и Safari/Chrome (webkit) и опера).
Используйте строгий doctype - вам не обязательно нужна совершенная разметка, но это должно быть очень хорошо. достаточно хорош, чтобы избежать режимов браузера, поскольку quirks по определению не являются стандартными
Используйте таблицу reset. Обратите внимание, что в зависимости от содержимого листа этот элемент может быть несовместим с целью № 2.
Используйте фреймворк javascript, например jQuery или Prototype, - они могут скрыть некоторые несовместимости JavaScript и DOM.
Использовать хорошую семантическую компоновку - она скорее ухудшится для ошибочного браузера.
Примите, что он не будет идеальным и не потеет действительно небольшие отклонения.

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

Для справки TODO см. этот вопрос:
https://stackoverflow.com/questions/72394/what-should-a-developer-know-before-building-a-public-web-site

Ответ 2

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

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

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

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

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

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

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

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

Ответ 3

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

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

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

ARGH! )

Ответ 4

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

Ответ 5

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

Ответ 6

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

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

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

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

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

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

Ответ 7

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

Ответ 8

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

Хорошо?