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

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

Фонд Yahoo css поможет. Чтобы стандартизировать форматирование, вам потребуется сброс и база.

Пользовательский интерфейс Yahoo (YUI) имеет реализацию Сброс CSS, которая стремится сформировать общую базовую линию для всех браузеров. Это должно подвести вас довольно близко.

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

Вы не найдете даже полного соответствия CSS уровня 1, так что вам придется внести некоторые изменения. По моему опыту, Opera, firefox и safari ведут себя одинаково, когда дело доходит до основных вещей (позиционирование, поплавки, div и т. д.), И вам придется настраивать только IE.

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

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

Такой подход поможет вам понять, что будет работать во всех основных браузерах.

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

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

Использование CSS Reset даст всему такую ​​же отправную точку, но не сильно поможет с изменениями, которые вы вносите за пределы этой отправной точки. Не могу сказать, что есть действительно простой способ. Одно из решений - придерживаться ограниченного набора CSS, который, как вы знаете, хорошо работает во всех браузерах, которые вы хотите поддерживать. Возможно, вы не сможете делать много изящных CSS-вещей, но время на отладку CSS должно значительно сократиться.

Вы также можете посмотреть фреймворк для css, такой как Чертеж или css-шаблон, или фреймворк юи сетки. Обычно эти фреймворки настраивают вас со стандартным набором определений классов css, которые вы можете применять к элементам, чтобы расположить их определенным и определенным образом.

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

Чтобы убедиться, что ваш css правильно отображается в разных браузерах, вы можете найти такую ​​службу, как BrowserShots, полезной, однако я думаю, вам будет очень сложно добиться абсолютной согласованности во всех браузерах.

Лично я предпочитаю использовать правильную разметку и CSS, исключить любые взломы браузера и разрабатывать макеты так, чтобы они постепенно ухудшались.

Я всегда создавал базовую таблицу стилей CSS, которая работает в полностью совместимых с W3C браузерах, таких как firefox, а затем создавал альтернативные таблицы стилей для конкретных браузеров, чтобы исправить любые проблемы со стилем в других браузерах, например IE6, IE7 и т. д.

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

<!--[if lte IE 6]>
<link href = "/css/eqtr_ie6.css" rel = "stylesheet" type = "text/css" />
<![endif]-->

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

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

У меня были положительные результаты использования Базовый CSS пользовательского интерфейса Yahoo, но в конце концов даже это не могло справиться с более сложными элементами, которые должны быть возможны с помощью 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), что значительно упрощает отладку, когда вы действительно сталкиваетесь с ошибкой.

Я бы рекомендовал взглянуть на Чертеж и 960 Сетка.

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

Соблюдение строгого доктипа также устранит многие различия. Кроме того, я обычно добавляю тег <div>, чтобы заключить все в тело, потому что я заметил разницу в том, как firefox и ie обрабатывают тег тела как элемент верхнего уровня.

Мне нравится сначала разрабатывать против Firefox, часто используя Yahoo YUI для сброса (и сетки для базовой структуры страницы), а также используя условные директивы IE для переопределения форматов, которые IE, при всей его – подол – мудрости, обрабатывает по-разному.

index.html

<head>
<link rel = "stylesheet" type = "text/css" media = "all" href = "styles/yui/grids/base-min.css" />
<link rel = "stylesheet" type = "text/css" media = "all" href = "styles/yui/grids/grids.css" />
<link rel = "stylesheet" type = "text/css" media = "all" href = "styles/screen.foo.css" />
<link rel = "stylesheet" type = "text/css" media = "print" href = "styles/print.foo.css" />

<!--[if gt IE 5]> <link rel = "stylesheet" type = "text/css" href = "styles/ie.screen.foo.css" /> <![endif]-->
</head>

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

Вы объявляете свои стили шрифтов в CSS, но на некоторых компьютерах Linux, некоторых компьютерах Mac и некоторых мобильных браузерах не будет указанного вами шрифта. Это изменение приводит к разной длине текста и переносу. Кроме того, существуют различия в версиях браузеров и операционных систем, на которых работает каждая из них; как разные браузеры реализуют функции масштабирования; размер текста может быть изменен конечным пользователем. Идентичный рендеринг - это просто недостижимая цель.

Но мужайтесь! Это «художественная» часть CSS: возможность гибкости в дизайне, позволяющей элегантно обрабатывать различия между браузерами, операционными системами и настройками конечных пользователей. Не стремитесь к идентичной визуализации - вы должны стремиться к последовательности бренда + соответствующему опыту + гибкости.

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

*{margin: 0; padding: 0}

При разработке CSS убедитесь, что вы используете современный браузер, соответствующий стандартам (лично я бы порекомендовал firefox 3 с отличным панель инструментов веб-разработчика, с помощью которого вы можете редактировать CSS прямо в браузере). Это, безусловно, улучшит внешний вид вашего сайта во всех новых браузерах.

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

Конечно, существует больше проблем, но это, вероятно, самая распространенная и раздражающая проблема, для решения более конкретных проблем вы всегда можете попробовать Google. Кроме того, в последнее время я подумываю игнорировать IE6 и более старые браузеры, если аудитория моего сайта позволяет это, на сайте веб-дизайна вы никогда не найдете никого, кто использует IE6, верно? Конечно, это возможно нечасто, поскольку многие (сумасшедшие;)) люди все еще используют IE6.

Кроме того, если вам нужно протестировать свой сайт, браузеры - это бесплатный способ сделать это быстро.

Организуйте свой рабочий процесс следующим образом, и это сократит потери времени.

1. Убедитесь, что вы объявить тип документа.
2. Используйте один из методов сброса, упомянутых здесь другими.
3. Работайте над своей структурой
4. Избегайте использования заполнения шириной и в том же элементе, где это возможно.
5. Всегда думайте о сокращении ненужного HTML и CSS, а не о постоянном добавлении.
6. Старайтесь не использовать поля слева и справа при перемещении элементов.

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

PS Один пункт, который я забыл упомянуть, - это использование валидаторов на W3.

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

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

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

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

Убедитесь, что вы указали правильный DOCTYPE.

Я до сих пор вижу, как люди регулярно справляются с проблемами блочной модели, потому что они забыли включить doctype. Без правильного типа документа Internet Explorer работает в «режиме причуд», как и другие браузеры в меньшей степени. Если вы укажете правильный тип документа, браузеры переключатся в «стандартный режим» и будут вести себя очень похоже друг на друга.

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

Сначала разработайте для Firefox. Вы можете протестировать в других браузерах, но не беспокойтесь об исправлениях, пока он не заработает так, как вы хотите, в Firefox. Затем перейдите к другим стандартным браузерам, а именно к Safari и Opera. Если вы написали хороший HTML и CSS, это не потребует много работы в этих браузерах.

Затем переходите к зверюгу, IE. Используйте условные комментарии для конкретных версий IE. IE 7 должен быть довольно простым, для IE 6 вам, возможно, придется пожертвовать некоторыми частями дизайна, чтобы заставить его работать легко. Это нормально, IE 6 скоро исчезнет, ​​поэтому не волнуйтесь, если вы не полностью его поддерживаете. Прозрачные PNG-файлы обычно являются самой большой проблемой, AlphaImageLoader подходит не для всех ситуаций.

Как упоминалось ранее, сброс CSS, такой как у Эрика Мейера, является хорошей отправной точкой, используйте его для создания собственного сброса в соответствии с вашими потребностями. В остальном ответ прост: серебряной пули нет.

Нанесение дизайнерской шляпы из фольги

CSS:

*{display:none}

Поначалу это занимает много времени, особенно если вы все еще изучаете основы DIV + CSS. Однако после того, как вы проделаете достаточно практики, встретите достаточно проблем и решите их все, вы узнаете, что РАБОТАЕТ, а что НЕ РАБОТАЕТ.

Тогда вы знаете, как в первую очередь написать максимально совместимый стиль, тем самым экономя время на отладке и редко имея какие-либо проблемы с любым из основных современных браузеров: IE6, IE7, FF2, FF3, Opera 9, Safari. 3 Win / Mac.

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

Думаю, единственным сбивающим с толку монстром должен быть IE6. Это в браузере. В остальном ff2, ff3, opera 9, safari win / mac, ie7, ie8 относительно похожи в механизме рендеринга, по крайней мере, с гораздо меньшим количеством ошибок, чем в IE6.

У меня есть несколько лучших практик для вас (того, кто только начал свое путешествие в CSS) в кодировании, чтобы получить максимальную совместимость с CSS:

1. Сначала используйте перезагрузить. Он очищает ваш разум и гарантирует каждый шаг вашей работы.
2. Не используйте отступы (слева и справа) и ширину в одном элементе, если вы хорошо не знаете, как это сработает.
3. Если элемент является плавающим, присвойте его родительскому элементу переполнение: скрыто и высота: 1%, если у родительского элемента еще нет высоты.
4. Не давайте элементу одновременно margin-top или margin-bottom, но только верхний край или нижний край. Потому что поля соседних элементов сжимаются друг с другом, что делает их расположение несколько непредсказуемым для новичков.
5. Если элемент является плавающим, присвойте ему дисплей: встроенный.
6. Не полагайтесь на z-index, если это не требуется для вашего сценария.
7. Если в IE6 произойдет что-нибудь странное, используйте для этого элемента высота: 1%.

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

Вы задаете неправильный вопрос, потому что вот единственный способ ответить на него:

<!DOCTYPE html>
<html>
<head>
  <style>* { background: #fff }</style>
</head>
<body></body>
</html>

Не очень хороший ответ, не так ли? :)

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

Должны ли веб-сайты выглядеть одинаково во всех браузерах?

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

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

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