Я использую файл css, который работает правильно в некоторых браузерах, а не в некоторых других браузерах, таких как IE и Safari.Как использовать разные CSS-файлы для разных браузеров?
Есть ли метод использовать различные .css и .js файлов для различной совместимости браузера?
Абсолютно и this is a great article showing how to do it, который сказал, что это обычно считается плохой практикой - и его следует избегать. Однако в очень сложных или ориентированных на дизайн сайтах, требующих много поддержки на прежнем уровне, часто бывает неизбежно, если оговорки известны и приняты. В целом, пожалуйста, не делайте этого!
Для сафари вам не нужен специальный css. Для IE общее использование создать специальный CSS, который переопределяет некоторые стили:
<link rel="stylesheet" type="text/css" href="style.css" media="all">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="styleIE.css" media="all">
<![endif]-->
Internet Explorer до версии 9, поддерживает conditional comments, которые позволяют принять некоторые HTML и показать его, или скрыть его от , конкретные версии IE. Вы можете использовать это для доставки определенных файлов CSS и JavaScript в определенные версии Internet Explorer. Например:
<!--[if IE 8]>
<link rel="stylesheet" href="ie8.css">
<![endif]-->
<!--[if lt IE 9]>
<link rel="stylesheet" href="less-than-ie-9.css">
<![endif]-->
Поскольку IE (до версии 9) не было заметно багги и имели значительно меньше нормы поддержки, чем другие браузеры, условные комментарии часто используются, чтобы исправить это. Paul Irish and others suggest using conditional comments to include several HTML tags on your page, with classes on them identifying which version of IE is being used, так что вы можете сохранить свой CSS, определенный IE, в той же таблице стилей, что и остальная часть вашего CSS. Например:
<!--[if lt IE 7]><html lang="en" class="lte-ie9 lte-ie8 lte-ie7 lte-ie6"><![endif]-->
<!--[if IE 7]> <html lang="en" class="lte-ie9 lte-ie8 lte-ie7"><![endif]-->
<!--[if IE 8]> <html lang="en" class="lte-ie9 lte-ie8"><![endif]-->
<!--[if IE 9]> <html lang="en" class="lte-ie9"><![endif]-->
<!--[if !IE><!--><html lang="en"><!--<![endif]-->
(Заметим, однако, что this prevents the X-UA-Compatible meta tag from working, unless you include an empty conditional comment before the doctype Вы можете понять, почему люди стремятся отказаться от поддержки старых версий IE.).
Другие браузеры не поддерживают аналогичные механизмы. Как показывает ссылка в @ExtPro’s answer, в браузерах обычно есть своя ошибка парсинга CSS, которая уникальна для них, которую вы можете использовать для целевого кода в этом браузере. Однако, как только вы спуститесь по этой дороге, вы полагаетесь на ошибочное поведение. Насколько вам известно, будущие браузеры, которых вы не хотите таргетировать, могут случайно включать в себя ту же ошибку. В общем, наилучшим подходом является кодирование стандартов и работа с любыми ошибками, которые вы найдете в определенных браузерах.
Следует также помнить, что некоторые вещи (например, элементы управления формой) не будут выглядеть одинаково в разных браузерах, и все в порядке. Обычно это не путает конечных пользователей.
Я нашел этот старый вопрос, потому что у меня была такая же проблема, поэтому я искал. Возможно, это хорошее решение для вас. По крайней мере, для меня это так. Итак, вот код использования разных styles.css для разных браузеров.
только JavaScript:
<script type="text/javascript">
var cssId = 'myCss';
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.id = cssId;
link.rel = 'stylesheet';
link.type = 'text/css';
link.media = 'all';
/*----------------------------------------------------------------*/
var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
var isFirefox = typeof InstallTrigger !== 'undefined';
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
var isChrome = !!window.chrome && !isOpera;
var isIE = /*@[email protected]*/false || !!document.documentMode;
if (!document.getElementById(cssId)){
var output = "";
if(isFirefox){
output += "Firefox";
link.href = 'firefox.css';
head.appendChild(link);
}
else if(isChrome){
output += "Chrome";
link.href = 'chrome.css';
head.appendChild(link);
}
else if(isSafari){
output += "Safari";
link.href = 'safari.css';
head.appendChild(link);
}
else if(isOpera){
output += "Opera";
link.href = 'opera.css';
head.appendChild(link);
}
else if(isIE){
output += "IE";
link.href = 'ie.css';
head.appendChild(link);
}
document.body.innerHTML = output;
}
</script>
Надеется, что это полезно.
Какая версия IE? – Anthony
Прочитайте [Различные файлы CSS для разных браузеров] (http://stackoverflow.com/questions/1706196/different-css-files-for-different-browsers) –
Для справки может быть полезно прочитать это сообщение http: //stackoverflow.com/questions/1294586/browser-detection-versus-feature-detection, как правило, обнаружение функций> обнаружение браузера – sg3s