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

Question

Правильное отображение веб-страницы во всех основных браузерах сегодня - очень трудоемкая задача.

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

Answer 1

Применение дизайнерской шляпы Tinfoil

CSS:

*{display:none}

Answer 2

Это действительно сложный вопрос - все браузеры? Означает ли это все версии? Мобильные браузеры? Только «основные» (опера, Firefox, т.е. и сафари)?

Вы не найдете даже полного соответствия требованиям CSS уровня 1, поэтому вам придется внести некоторые изменения. В моем опыте с оперой, Firefox и Safari ведут себя одинаково, когда дело доходит до базовых вещей (позиционирование, плавающие элементы, деления и т. Д.), И вам нужно настроить только IE.

Вы также можете использовать протестированную библиотеку CSS или фреймворк, например, сетки Yahoo (http://developer.yahoo.com/yui/grids/)) или программный интерфейс, например, веб-инструментарий Google (http://code.google.com/webtoolkit/).

Answer 3

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

проверить Ориентация на IE с использованием условных комментариев и только одной таблицы стилей в Position - это все для отличной техники подачи стилей, специфичных для версии IE, без использования хаков CSS; это позволяет вам хранить правила стилей вместе с помощью селектора, а не браузера.

Answer 4

Я обычно работаю против W3C CSS-валидатора , затем проверяю, что все выглядит так, как я хочу, в соответствующих браузерах. Валидация имеет большое значение для последовательного поведения.

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

Answer 5

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

Answer 6

На основании нет никакой гарантии, что такая вещь когда-либо будет работать идеально. Пока разработчики браузеров находят способы делать что-то свое, а не «стандартный» способ действий, у вас будут различия.

У меня были положительные результаты при использовании Основы пользовательского интерфейса Yahoo CSS , но, в конце концов, даже это не могло справиться с более сложными элементами, которые должны быть возможны с помощью CSS.

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

Вот фрагмент кода PHP для иллюстрации. Извините за решение для конкретного языка, но я думаю, что идея достаточно ясна для реализации на разных языках:

$sHTML .= "\t\t<LINK rel=\"stylesheet\" type=\"text/css\" href=\"".$sURLCSS.$sStyle."\" />\n";
if (file_exists($sPathCSS.$sFileStyle."_".BROWSER_AGENT.".".$sExtension))
  $sHTML .= "\t\t<LINK rel=\"stylesheet\" type=\"text/css\" href=\"".$sURLCSS.$sFileStyle."_".BROWSER_AGENT.".".$sExtension."\" />\n";
if (file_exists($sPathCSS.$sFileStyle."_".BROWSER_AGENT."_".BROWSER_VERSION.".".$sExtension))
  $sHTML .= "\t\t<LINK rel=\"stylesheet\" type=\"text/css\" href=\"".$sURLCSS.$sFileStyle."_".BROWSER_AGENT."_".BROWSER_VERSION.".".$sExtension."\" />\n";

Без отсутствующих файлов, нераспознанных тегов или другого кода, который может задушить некоторые браузеры, страницы из фреймворка отображаются так, как мы хотим, чтобы они отображались во всех браузерах, запрошенных нашими клиентами. Что еще более важно, они делают это, не вызывая ошибок (то есть пустой консоли ошибок в FireFox), что значительно упрощает отладку, когда вы действительно сталкиваетесь с ошибкой.

Answer 7

Я бы рекомендовал взглянуть на Blueprint и 960 Grid System .

Помимо сброса настроек и включения CSS-исправлений для Internet Explorer, они оба позволят вам легко работать с сеткой дизайна, которая позаботится о многих утомительных настройках при создании макетов на основе CSS.