Правильное отображение веб-страницы im все основные браузеры сегодня - очень трудоемкая задача.
Есть ли простой способ сделать стиль CSS одинаковым в каждом браузере? Или, по крайней мере, у вас есть несколько советов, чтобы облегчить эту работу?
Самый простой или быстрый способ сделать CSS одинаковым во всех браузерах
Ответ 1
Я согласен со всеми предложениями "reset" и предложениями "grid", но я хотел бы добавить немного советов: цель идентичного в каждом браузере, на практике, недостижима, потому что вы не можете контролировать клиента. Пример: шрифты.
Вы объявляете стили шрифтов в CSS, но некоторые Linux-машины, некоторые Mac, некоторые мобильные браузеры, не будут иметь указанный вами шрифт. Это изменение приводит к различной длине текста и обертыванию. Затем происходит отклонение версий браузеров и операционных систем; как различные браузеры реализуют функции масштабирования; и размер текста может быть скорректирован конечным пользователем. Идентичный рендеринг - просто недостижимая цель.
Но с сердцем! Это "художественная" часть CSS: способность быть гибкой в вашем дизайне, так что отклонения между браузерами, операционными системами и настройками конечного пользователя обрабатываются элегантно. Не стремись к идентичному рендерингу - вы должны стремиться к согласованности бренда + соответствующий опыт + гибкость.
Ответ 2
попробуйте использовать css reset, например eric meyer reset или YUI reset. поможет нелегкий или идеальный способ сделать вещи одинаковыми в каждом браузере.
Ответ 3
Организуйте свой рабочий процесс следующим образом, и это уменьшит трату времени.
- Убедитесь, что объявить тип документа.
- Используйте один из методов reset, которые другие упомянули здесь.
- Работайте над своей структурой.
- Избегайте использования прокладок ширины и на том же элементе, где вы можете.
- Всегда думайте о сокращении ненужных HTML и CSS, а не добавляя все время.
- Старайтесь не использовать маржи слева и справа, когда плавающие элементы.
Если вы придерживаетесь этих элементов, многие наиболее распространенные проблемы не появятся.
PS Один из пунктов, о которых я забыл упомянуть, использовал валидаторы в W3.
Ответ 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, чтобы просматривать ваш сайт в разных браузерах.
Ответ 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:
- Сначала используйте reset. Это очищает ваш разум и гарантирует, что каждый шаг вашей работы.
- Не используйте прописку (левую и правую) и ширину для одного и того же элемента, если вы не знаете, как это будет работать.
- Если элемент перемещается, укажите родительский переполнение: скрытый и высота: 1%, если родительский элемент уже не имеет высоты.
- Не указывайте элемент как margin-top, так и margin-bottom, но только margin-top или margin-bottom. Поскольку поля соседних элементов сворачиваются друг в друга, что делает позиционирование несколько непредсказуемым для новичков.
- Если элемент перемещается, дайте ему display: inline.
- Не полагайтесь на z-index, если вам не нужен этот сценарий.
- Если что-то странное происходит в IE6, используйте height: 1% для этого элемента.
По моему опыту, это вещи, которые действительно помогут вам в решении потенциальных проблем. Используйте их, и они устраняют ваши шансы споткнуться о любой длительной проблеме на 80%. На самом деле есть более тривиальные подсказки, чем при работе с конкретными тегами, но позвольте называть его днем.
Ответ 6
Yahoo css foundation поможет. Для стандартизации форматирования вам понадобится reset и base.
Ответ 7
Прежде всего, вы можете попробовать reset, как и некоторые другие люди, упомянутые здесь, вы можете сделать быстрый запас и дополнение reset с помощью этого фрагмента css:
*{margin: 0; padding: 0}
Когда вы создаете свой css, убедитесь, что используете современный браузер, совместимый с стандартами (лично я бы порекомендовал firefox 3, который имеет отличную панель инструментов веб-разработчика, с помощью которого вы можете редактировать css из своего браузера). Выполнение этого, безусловно, заставит ваш сайт выглядеть нормально во всех новых браузерах.
Большинство проблем с макетом, которые вы будете иметь, вероятно, будут вызваны браузером Internet Explorer неправильной интерпретацией модели окна, вы можете избежать этого никогда не устанавливая ширину и маржу или дополнение в одно и то же время. Это может показаться раздражающим, но это не так, просто примените дополнение или марку к содержимому, которое находится внутри вашего элемента с установленной шириной.
Конечно, существует больше проблем, но это, вероятно, самый распространенный и раздражающий, для более конкретных проблем вы всегда можете попробовать google. Кроме того, в последнее время я рассматриваю возможность игнорировать IE6 и более старые браузеры, если это позволяет моя аудитория сайта, на веб-сайте дизайна вы никогда не найдете никого, использующего IE6, верно? Конечно, это невозможно, так как многие (сумасшедшие;)) люди все еще используют IE6.
Кроме того, если вам нужно протестировать свой сайт browsershots, это бесплатный способ сделать это быстро.
Ответ 8
Обязательно включите соответствующий DOCTYPE.
Я все еще вижу, как люди регулярно справляются с проблемами с коробкой, потому что они забыли включить doctype. Без надлежащего doctype Internet Explorer отображает в режиме "quirks", а в других браузерах - в меньшей степени. Если вы включаете правильный тип doctype, браузеры переключаются в "стандартный режим" и ведут себя очень похоже на eachother.
Другое, тогда, если вы сделаете это для жизни, вы быстро заберете и запомните те тонкие угловые случаи, когда IE интерпретирует вещи, немного отличающиеся от Firefox и т.д. С некоторым опытом можно полностью спроектировать всю страницу в вашем любимый браузер и только очень малейшие настройки CSS, чтобы сделать его идеально идеальным для пикселов в других браузерах.
Ответ 9
Проверяйте свой CSS во всех браузерах, когда идете. Это ужасно, чтобы получить пиксель в браузере вашего любимца только, чтобы найти его в других браузерах.
Использование этого подхода облегчит вам понимание того, что будет работать на всех основных браузерах.
Ответ 10
У меня был успех с помощью Eric Meyer CSS reset здесь. Он в основном переопределяет кучу стилей CSS браузера, которые по умолчанию. Сказав это, все еще есть много различий (вероятно, некоторые из них беспокоят вас как разницы в коробке и т.д. В этом случае было бы лучше использовать Blueprint, чтобы обрабатывать большую часть вашего css.
Ответ 11
Использование CSS Reset даст все то же самое исходное значение, но не поможет многое с изменениями, которые вы делаете за пределами этой начальной точки. Я не могу сказать, что это действительно простой способ. Одним из решений является придерживаться ограниченного набора CSS, который, как вы знаете, хорошо работает во всех браузерах, которые вы хотите поддерживать. Возможно, вам не удастся сделать многое из материала Fancier CSS, но ваше время отладки CSS должно значительно снизиться.
Ответ 12
Вы также можете посмотреть на фреймворк css, например Blueprint или css-boilerplate или yui grids. Обычно эти фреймворки настраивают вас стандартным набором определений класса css, которые вы можете применять к элементам, чтобы выстроить их определенным и определенным образом.
Ответ 13
Если он должен быть идеальным для пикселя, тогда вам нужно будет использовать px в ваших таблицах стилей. Используйте css reset таблица стилей, а затем размер все на основе пикселей.
Чтобы гарантировать корректность рендеринга css в разных браузерах, вы можете найти полезную услугу, например BrowserShots, но я думаю вам будет очень сложно получить абсолютную согласованность во всех браузерах.
Мое личное предпочтение заключается в использовании правильной разметки и css, оставьте без каких-либо браузеров, а макеты дизайна грамотно деградируют.
Ответ 14
В соответствии со строгим doctype позаботится и о многих различиях. Кроме того, я обычно добавляю тег <div> , чтобы заключить все в тело, потому что я заметил разницу в том, как firefox vs, т.е. Обрабатывает тег body как элемент верхнего уровня.
Ответ 15
Мне нравится сначала разрабатывать Firefox, часто используя Yahoo YUI для reset (и сетки для базовой структуры страницы), и используя условные директивы 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>
Ответ 16
Сначала создайте для Firefox. Вы можете протестировать его в других браузерах, но не беспокойтесь о исправлениях, пока он не будет работать именно так, как вы хотите в Firefox. Затем переходите к другим браузерам, основанным на стандартах, а именно Safari и Opera. Если вы написали хорошие HTML и CSS, это не должно требовать много работы в этих браузерах.
Затем переходите к зверю из партии, IE. Используйте условные комментарии для конкретных версий IE. IE 7 должен быть довольно прост, для IE 6 вы можете обнаружить, что вам приходится жертвовать некоторыми частями дизайна, чтобы заставить его работать легко. Это нормально, IE 6 находится на пути, поэтому не беспокойтесь, если вы не полностью его поддерживаете. Прозрачные PNG обычно являются самой большой проблемой, AlphaImageLoader просто не делает трюк в любой ситуации.
Как упоминалось ранее, CSS reset, такой как Eric Meyer, является хорошей отправной точкой, используйте его для создания собственного reset на основе ваших потребностей. Кроме того, ответ прост: нет серебряной пули.
Ответ 17
Нужны ли веб-сайты одинаково выглядеть в каждом браузере?
Кроме того, я думаю, практика делает совершенным. И читайте обо всем, что вы можете найти о потенциальных проблемах, которые вы можете наткнуться. Используя reset файлы, правильные доктрины, валидаторы и фреймворки могут помочь вам в определенной степени, но, в конце концов, вы контролируете код, и только вы точно знаете, как вы хотите, чтобы он выглядел. Код может быть действительным, и браузер может сделать то, что вы ему сказали, и он по-прежнему не похож на то, что вы хотите.
Чем больше вы используете CSS для целей макета, тем больше проблем вы столкнетесь, тем больше проблем вы найдете вокруг, и тем больше вы узнаете. После довольно много лет создания макетов полностью со структурированным, семантическим HTML и neat'n'tidy CSS, мне редко приходится тратить много времени на исправление недостатков в том или ином браузере.
Ответ 18
- Используйте reset фрагмент
- Разработка веб-стандартов
- Подтвердите свою разметку и CSS
- Не используйте поля и дополнения в тех же частях элемента
- Использовать условия IE
- Тест во всех браузерах, которые вы хотите поддерживать
- Поймите, что ничто не будет совершенным, но вы можете приблизиться.
Ответ 19
Пользовательский интерфейс Yahoo (YUI) имеет CSS Reset, который стремится сформировать общую базовую линию во всех браузерах. Это должно быть очень близко.
Ответ 20
На самом деле это сложный вопрос - все браузеры? Означает ли это все версии? Мобильные браузеры? Только "магистральные" (опера, firefox, т.е. Сафари)?
Вы не найдете даже полного соответствия материалам уровня 1 уровня CSS, поэтому вам понадобятся некоторые твики, которые вам нужно будет сделать. По моему опыту, opera, firefox и safari ведут себя одинаково, когда речь заходит о базовых материалах (позиционирование, поплавки, divs и т.д.), И это просто IE, который вам придется настроить.
Вы также можете использовать проверенную библиотеку или фреймворк CSS как сетки yahoo (http://developer.yahoo.com/yui/grids/) или программный интерфейс, такой как google web toolkit (http://code.google.com/webtoolkit/).
Ответ 21
Я обычно обнаруживаю, что идентичный выглядящий CSS возникает, если я использую float для компоновки страницы в ящиках. Модель потока работает так, как вы думаете, и должна быть выполнена во всех основных браузерах. Я знаю, что некоторые скажут мне, что использование большого количества поплавков неверно, но оно работает на удивление хорошо.
Ответ 22
В основе нет никакой гарантии, что такая вещь когда-либо будет работать отлично. Пока разработчики браузеров находят способы сделать свое дело, а не "стандартный" способ делать что-то, у вас будут различия.
У меня были положительные результаты, используя "Интерфейс пользовательского интерфейса 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), что делает отладку, когда вы действительно выполняете ошибку намного проще.
Ответ 23
Я бы рекомендовал взглянуть на Blueprint и 960 Grid System.
Помимо выполнения сбросов и в том числе исправлений CSS для Internet Explorer, они оба позволят вам легко работать с сеткой проектирования, которая позаботится о большой утомительной настройке при создании макетов на основе CSS.
Ответ 24
Я обычно развиваюсь против W3C CSS validator, а затем проверяю, как все выглядит так, как я хочу, чтобы они были в соответствующих браузерах. Валидация имеет большое значение для последовательного поведения.
Иногда я разбиваю страницу вниз только на стили, которые правильно проверяются и отображаются в основных браузерах, на которые я нацеливаюсь, иногда я дополняю их настройками, зависящими от браузера, как упоминалось в других плакатах.
Ответ 25
CSS-рамки, безусловно, помогают, хотя они могут быть легко тяжелыми из-за кучи стилей, которые вам не понадобятся или используются.
проверить Таргетирование IE с использованием условных комментариев и только одного таблицы стилей в позиции - это все для отличной техники для подачи стилей, зависящих от версии IE, без использования CSS-хаков; это позволяет сохранять правила стиля вместе с помощью селектора, а не браузера.
Ответ 26
Вы задаете неправильный вопрос, потому что здесь единственный способ ответить на этот вопрос:
<!DOCTYPE html>
<html>
<head>
<style>* { background: #fff }</style>
</head>
<body></body>
</html>
Не так много ответа, не так ли?:)
Все остальные здесь - сделайте свой CSS работающим в каждом браузере, не пытайтесь сделать его похожим. Вы не можете.
Ответ 27
Применение шляпы дизайна Tinfoil
CSS:
*{display:none}