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

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

24 голосов
/ 17 сентября 2008

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

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

Ответы [ 27 ]

2 голосов
/ 17 сентября 2008

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

2 голосов
/ 17 сентября 2008

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

2 голосов
/ 17 сентября 2008

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

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

2 голосов
/ 17 сентября 2008

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

index.html

<head><br> <link rel="stylesheet" type="text/css" media="all" href="styles/yui/grids/base-min.css" /><br> <link rel="stylesheet" type="text/css" media="all" href="styles/yui/grids/grids.css" /><br> <link rel="stylesheet" type="text/css" media="all" href="styles/screen.foo.css" /><br> <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]--><br> </head>

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

Соблюдение строгого учения позаботится и о многих различиях. Кроме того, я обычно добавляю тег

для включения всего в тело, потому что я заметил разницу в том, как firefox и т. Е. Обрабатывают тег body как элемент верхнего уровня.
2 голосов
/ 19 сентября 2008

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

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

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

2 голосов
/ 30 января 2009

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

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

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

0 голосов
/ 28 декабря 2008

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

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

Не так много ответов, не так ли? :)

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

0 голосов
/ 17 сентября 2008

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

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...