Контакт с Firefox и различиями Internet Explorer
Я использовал фрагменты кода выше, чтобы определить, есть ли касание, поэтому мои фреймворки в fancybox будут отображаться на настольных компьютерах, а не на ощупь. Я заметил, что Opera Mini для Android 4.0 все еще регистрировалась как устройство без сенсорного ввода, когда использовался только код blmstr. (Кто-нибудь знает почему?)
Я закончил тем, что использовал:
<script>
$(document).ready(function() {
var ua = navigator.userAgent;
function is_touch_device() {
try {
document.createEvent("TouchEvent");
return true;
} catch (e) {
return false;
}
}
if ((is_touch_device()) || ua.match(/(iPhone|iPod|iPad)/)
|| ua.match(/BlackBerry/) || ua.match(/Android/)) {
// Touch browser
} else {
// Lightbox code
}
});
</script>
8 ответов
Если ваши макеты радикально отличаются, лучшим решением было бы вернуться и заново продумать свой макет / CSS. Честно говоря, мне никогда не требовались две таблицы стилей - одна для FF, а другая для IE.
Одним из очень полезных инструментов является «таблица стилей сброса», подобная той, которую предоставляет Эрик Мейер . Это сбрасывает большую часть ваших элементов в состояние, согласованное между несколькими браузерами.
Вдумчивое и терпеливое развитие может привести к единой таблице стилей (здесь упрощенно, без учета reset.css, text.css и т. Д.), Которая будет работать как для FF, так и для IE.
Я бы посоветовал вам загрузить Firebug, надстройку для Firefox , и начать работать над своими стилями. Также будет полезно установить Панель инструментов разработчика IE - своего рода Firebug IE. А если вы хотите протестировать несколько версий IE одновременно, ознакомьтесь с IETester .
Создание сайта - утомительный процесс - не сокращайте путь :) Приучите себя быть трудным, когда он доходит до макетов. Не соглашайтесь ни на какие компромиссы - это принесет вам пользу в долгосрочной перспективе!
Многие кроссбраузерные проблемы сводятся к следующему: вы что-то не указали, и разные браузеры делают разные предположения. Следовательно:
Объявите действительный тип документа
Ваш тип документа сообщает браузеру, какие правила вы будете использовать в своем коде. Если вы не укажете, браузер должен угадать, а разные браузеры будут угадывать по-разному.
По моему опыту, «строгий» тип документа заставляет IE вести себя лучше (включает такие вещи, как CSS: селекторы наведения курсора на div в IE7).
Эта статья дает хорошее представление о типах документов.
Проверяйте свой HTML и CSS
Необязательно доводить все до совершенства, но проверка - это хорошая обратная связь. Как Джефф сказал :
Знание правил и границ помогает вам определить, что вы делаете, и дает вам законную возможность соглашаться или не соглашаться. Вы можете сделать осознанный выбор вместо случайного «Я просто сделаю это, и это сработает».
Представьте, что вы открыли тег абзаца и никогда не закрывали его. Если вы затем откроете тег списка, вы имели в виду, что он находится внутри абзаца или нет? Проверка поможет вам уловить это, закрыть тег и устранить двусмысленность.
Рассмотрите возможность сброса CSS
Различные браузеры предполагают разные базовые правила CSS. Вы можете помочь им действовать одинаково, заранее сгладив все различия. Эрик Мейер, написавший CSS: The Definitive Guide , использует этот сброс .
Тестируйте в нескольких браузерах, обрабатывайте IE последний
Тестируйте в нескольких браузерах по ходу. Как правило, вы обнаружите, что браузеры, отличные от IE, ведут себя аналогичным образом, и IE - особый случай, особенно если вы последуете приведенному выше совету. При необходимости вы можете добавить хаки IE в отдельную таблицу стилей и загружать ее только для пользователей IE.
Из любви к Богу (и вашей hairline) сначала разрабатываются в FF / Webkit, а затем вносятся изменения, чтобы заставить его работать в семействе IE.
При необходимости я предпочитаю хаки в документе CSS (* html .foo) условным комментариям, потому что мысль о размещении Разметка MS в моем HTML вызывает у меня тошноту.
Сначала запустите ваш css через валидатор css . Это поможет вам убедиться, что ваш css совместим со стандартами, поддерживающими браузеры, прислушивайтесь к любым советам, которые он дает, по улучшению вашего css. Как только вы пройдете валидатор css, вы сможете увидеть, есть ли какие-либо ошибки, специфичные для браузера.
Часто есть способы сделать ваш CSS совместимым с обоими браузерами. Это займет немного времени, но облегчит обслуживание в дальнейшем. Так что, если у вас есть время, я рекомендую попытаться найти способы реализовать все элементы таким образом.
Я часто сталкиваюсь с этим при центрировании объектов. Совсем недавно у меня были проблемы со столом для веб-портала. Поиск в Google "css centering table" дал центрирование таблицы с использованием html или css . Используя тот же подход, вы сможете выяснить, как устранить расхождения в браузере.
Отдельные файлы для конкретных частей вашего css браузера. И используйте условные операторы html для переключения между ними.
<link type="text/css" href="style.css" />
<!--[If IE]>
<link type="text/css" href="IEHacks.css" />
<![endif]-->
<!--[if !IE]>
<link type="text/css" href="NonIEHacks.css" />
<!--<![endif]-->
Статья MSDN об условных комментариях, включая список принятых тестовых значений
Для достижения наилучших результатов разрабатывайте в Firefox (поскольку он соответствует стандартам) и периодически проверяйте кроссбраузерность в разных версиях IE, чтобы убедиться, что он работает нормально и там.
Вы не должны Нет необходимости иметь полностью отдельный файл CSS для IE, но в сложной компоновке вам может потребоваться небольшой набор правил переопределения, чтобы IE работал - выставляйте эти правила для IE только с помощью Условных комментариев IE . Никогда не используйте CSS-хаки, они не нужны и подвержены ошибкам.
Clearing all styles and making every browser a blank slate is ideal and should be done - but coding for every single browser is simply not possible. You cannot make a website with CSS that will look 100% exactly the same in every single browser unless you code everything to be pixel based, and even then you'll end up with issues based on IE's interpretation of padding and margins. A pixel isn't always a pixel.
That said, my solution, as a CSS implementer since the beginning, is to first clear all padding and margins, which cause most of the problems, in your main CSS file.
* { padding: 0; margin: 0; }
Then create your site as you would normally - ideally coding for Firefox initially as there are hacks you can use for Safari and all versions of IE. Depending on the "render like IE _" is unacceptable. Check your site in IE 6, 7, 8 (use IE Tester if you have to), Firefox, and Safari simultaneously. Try to make as many minor changes as possible to get them all looking very close to the same. Then go in and address the minor remaining issues (at this point you may only have one or two per browser - if any).
<!--[if IE 6]><link href="css/CSSName_IE6.css" rel="stylesheet" type="text/css"><![endif]-->
<!--[if IE 7]><link href="css/CSSName_IE7.css" rel="stylesheet" type="text/css"><![endif]-->
<!--[if IE 8]><link href="css/CSSName_IE8.css" rel="stylesheet" type="text/css"><![endif]-->
Once you have created your primary style sheet with all the styles for your entire site create conditional comments for separate stylesheets for IE 6, 7, and 8 where you only override those attributes that need overriding.
e.g. If you need to adjust the font size from the normal .8 em for Firefox to .7 em for IE 6 but your particular selector has 12 other attributes, only put that single attribute override in the conditional stylesheet. Don't overwrite the entire style with all attributes. It's unnecessary.
Master CSS
.iframestyle { float: left; margin-right: 3px; width: 305px; }
IE 6
.iframestyle { width: 309px; height: 263px; }
IE 7
.iframestyle { width: 309px; margin-top: 0px; }
IE 8
.iframestyle { width: 305px; margin-top: 0px; }
Hopefully that helps better show what I mean (and yes, in IE 8 the width had to be stated again as it picked up the other IE styles for whatever reason).