Каковы правила для переносимого CSS?

Question

Я новичок в CSS. Какие правила нужно соблюдать, чтобы убедиться, что CSS выглядит одинаково в других браузерах? (Я использую Firefox).

P.S. Есть ли какие-то особые правила для IE7?

Answer 1

Вы задаете здесь довольно широкий вопрос, но следует придерживаться следующих правил:

1. Убедитесь, что это стандартизированные CSS и HTML. Если у него есть префикс поставщика -moz-, -webkit- или -o- (или более), он может вести себя не так, как вы намереваетесь.

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

3. Рассмотрите возможность использования сброса CSS, например Сброс Эрика Мейера . Это сбросит все ваши элементы на 0padding, margin и т. Д.

   Или используйте Normalize (как указывает Мео), как HTML5 Boilerplate .

4. Узнайте, как использовать IE Условные комментарии . По большей части «настоящие» браузеры (Chrome, Firefox, Opera) будут отображать HTML так, как должно быть. Поскольку существует несколько используемых версий IE, вам придется предоставлять разные коды для каждой из версий (не поддерживают IE6), и это лучший способ сделать это.

Вероятно, есть еще много чего добавить, но на самом деле самое лучшее - это опыт.

Удачи!

Answer 2

Я думаю, что лучшее место для начала здесь: http://html5boilerplate.com/ (Прочтите закомментированный CSS.) Это нормализует поведение CSS в разных браузерах. (Я бы не рекомендовал использовать Reset).

Проконсультируйтесь http://na.isobar.com/standards/, чтобы ознакомиться с лучшими передовыми методами.

Существуют некоторые правила, чтобы заставить ваши вещи работать в IE 6 и 7 (это единственные, которые могут вызвать у вас серьезные проблемы):

• Когда что-то не работает в IE6 / 7, попробуйте установить zoom: 1, прежде чем пытаться что-либо еще

• z-index немного сложен для старых IE

• сначала создайте свои сайты для IE, а затем сделайте модные вещи для другого браузера (CSS3), это избавит вас от многих проблем

• Не вставляйте более 32 CSS-файлов в ваш HTML-файл (без шуток;) http://acidmartin.wordpress.com/2008/11/25/the-32-external-css-files-limitation-of-internet-explorer-and-more/)

• Проконсультируйтесь http://www.quirksmode.org/, чтобы развить чувствительность к тому, что работает, где

• старайтесь избегать фильтров MS в вашем CSS ... (может замедлить рендеринг вашего сайта и привести к неожиданному поведению с помощью JS Animations)

Answer 3

На этом веб-сайте у вас есть вся необходимая информация, изучите http://www.quirksmode.org/, автор Peter-Paul Koch & Не используйте специфичные для браузера селекторы, такие как префиксы -moz- или -webkit-

Наконец, нет, не совсем уверен, к сожалению.Тестирование, тестирование и другие тесты - единственное решение.

Answer 4

Ты не всегда можешь быть уверен.

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

http://meyerweb.com/eric/tools/css/reset/

Answer 5

Этот сайт даст вам хорошее начало.

http://htmlhelp.com/reference/css/structure.html

Answer 6

Вплоть до IE 9 IE, казалось, никогда не следовал никаким правилам в отношении CSS, но почти все другие браузеры следуют этим стандартам W3:

Справочник по CSS , Обзор W3 , W3 CSS Validator

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