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

Question

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

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

Answer 1

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

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

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

Answer 2

попробуйте использовать сброс css, например eric meyer reset или YUI reset . поможет, но не простой и не идеальный способ сделать вещи одинаковыми в каждом браузере

Answer 3

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

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

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

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

Answer 4

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

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

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

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

Answer 5

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

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

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

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

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

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

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

Answer 6

Поможет Yahoo css foundation . Для стандартизации форматирования вам понадобится сброс и база.

Answer 7

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

*{margin: 0; padding: 0}

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

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

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

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

Answer 8

Не забудьте указать правильный DOCTYPE.

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

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

Answer 9

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

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

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

Answer 10

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