IE10 +不再支持浏览器检测标签来识别浏览器。
为了检测IE10,我使用JavaScript和功能测试技术来检测某些ms
前缀样式,例如msTouchAction
和msWrapFlow
。
我想对IE11做同样的事情,但我假设所有的IE10样式也将在IE11中得到支持。任何人都可以帮我识别IE11中唯一可以用来分辨两者的风格或功能吗?
额外信息
我也在使用Modernizr,但在这里没有用。我需要帮助解决我明确提出的问题。
根据不断发展的主题,我更新了以下内容:
* html .ie6 {property:value;}
要么
.ie6 { _property:value;}
*+html .ie7 {property:value;}
要么
*:first-child+html .ie7 {property:value;}
@media screen\9 {
.ie67 {property:value;}
}
要么
.ie67 { *property:value;}
要么
.ie67 { #property:value;}
@media \0screen\,screen\9 {
.ie678 {property:value;}
}
html>/**/body .ie8 {property:value;}
要么
@media \0screen {
.ie8 {property:value;}
}
.ie8 { property /*\**/: value\9 }
@media screen\0 {
.ie8910 {property:value;}
}
@media screen and (min-width:0\0) and (min-resolution: .001dpcm) {
// IE9 CSS
.ie9{property:value;}
}
@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
// IE9+ CSS
.ie9up{property:value;}
}
@media screen and (min-width:0) {
.ie910{property:value;}
}
_:-ms-lang(x), .ie10 { property:value\9; }
_:-ms-lang(x), .ie10up { property:value; }
要么
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.ie10up{property:value;}
}
使用-ms-high-contrast
意味着MS Edge不会成为目标,as Edge does not support -ms-high-contrast
。
_:-ms-fullscreen, :root .ie11up { property:value; }
Modernizr在页面加载时快速运行以检测功能;然后它创建一个包含结果的JavaScript对象,并将类添加到html元素
使用Javascript:
var b = document.documentElement;
b.setAttribute('data-useragent', navigator.userAgent);
b.setAttribute('data-platform', navigator.platform );
b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');
在html
元素中添加(例如)以下内容:
data-useragent='Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)'
data-platform='Win32'
允许非常有针对性的CSS选择器,例如:
html[data-useragent*='Chrome/13.0'] .nav{
background:url(img/radial_grad.png) center bottom no-repeat;
}
如果可能,请确定并修复任何问题,而不是黑客攻击。支持progressive enhancement和graceful degradation。然而,这是一个并非总能获得的“理想世界”场景,因此上述内容应该有助于提供一些好的选择。
你应该使用Modernizr,它会在body标签中添加一个类。
也:
function getIeVersion()
{
var rv = -1;
if (navigator.appName == 'Microsoft Internet Explorer')
{
var ua = navigator.userAgent;
var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null)
rv = parseFloat( RegExp.$1 );
}
else if (navigator.appName == 'Netscape')
{
var ua = navigator.userAgent;
var re = new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null)
rv = parseFloat( RegExp.$1 );
}
return rv;
}
请注意,IE11仍处于预览状态,用户代理可能会在发布前更改。
IE 11的User-agent字符串当前是这样的:
Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv 11.0) like Gecko
这意味着您可以简单地测试版本11.xx,
var isIE11 = !!navigator.userAgent.match(/Trident.*rv 11\./)
也许Layout Engine v0.7.0可以很好地解决您的问题。它使用浏览器功能检测,不仅可以检测IE11和IE10,还可以检测IE9,IE8和IE7。它还可以检测其他流行的浏览器,包括一些移动浏览器它为html标签添加了一个类,易于使用,并且在一些相当深入的测试中表现良好。
您可以使用js并在html中添加一个类来维护conditional comments的标准:
var ua = navigator.userAgent,
doc = document.documentElement;
if ((ua.match(/MSIE 10.0/i))) {
doc.className = doc.className + " ie10";
} else if((ua.match(/rv:11.0/i))){
doc.className = doc.className + " ie11";
}
或者像bowser一样使用lib:
或用于特征检测的现代化:
使用以下属性:
检测IE及其版本实际上非常简单,至少非常直观:
var uA = navigator.userAgent;
var browser = null;
var ieVersion = null;
if (uA.indexOf('MSIE 6') >= 0) {
browser = 'IE';
ieVersion = 6;
}
if (uA.indexOf('MSIE 7') >= 0) {
browser = 'IE';
ieVersion = 7;
}
if (document.documentMode) { // as of IE8
browser = 'IE';
ieVersion = document.documentMode;
}
.
这样,您也可以在兼容模式/视图中捕获高IE版本。接下来,它是分配条件类的问题:
var htmlTag = document.documentElement;
if (browser == 'IE' && ieVersion <= 11)
htmlTag.className += ' ie11-';
你可以试试这个:
if(document.documentMode) {
document.documentElement.className+=' ie'+document.documentMode;
}
我在IE11中遇到了与重力形式(WordPress)相同的问题。表单的列样式“display:inline-grid”打破了布局;应用上面的答案解决了差异!
@media all and (-ms-high-contrast:none){
*::-ms-backdrop, .gfmc-column { display: inline-block;} /* IE11 */
}
退一步:为什么你甚至试图检测“互联网浏览器”而不是“我的网站需要做X,这个浏览器是否支持该功能?如果是,那么好的浏览器。如果没有,那么我应该警告用户”。
你应该打起http://modernizr.com/而不是继续你正在做的事情。
所以我最终找到了解决这个问题的方法。
在通过Microsoft documentation搜索后,我设法找到了一个新的IE11风格msTextCombineHorizontal
在我的测试中,我检查IE10样式,如果它们是正面匹配,那么我检查IE11的样式。如果我找到它,那么它是IE11 +,如果我没有,那么它是IE10。
代码示例:Detect IE10 and IE11 by CSS Capability Testing (JSFiddle)
/**
Target IE 10 with JavaScript and CSS property detection.
# 2013 by Tim Pietrusky
# timpietrusky.com
**/
// IE 10 only CSS properties
var ie10Styles = [
'msTouchAction',
'msWrapFlow',
'msWrapMargin',
'msWrapThrough',
'msOverflowStyle',
'msScrollChaining',
'msScrollLimit',
'msScrollLimitXMin',
'msScrollLimitYMin',
'msScrollLimitXMax',
'msScrollLimitYMax',
'msScrollRails',
'msScrollSnapPointsX',
'msScrollSnapPointsY',
'msScrollSnapType',
'msScrollSnapX',
'msScrollSnapY',
'msScrollTranslation',
'msFlexbox',
'msFlex',
'msFlexOrder'];
var ie11Styles = [
'msTextCombineHorizontal'];
/*
* Test all IE only CSS properties
*/
var d = document;
var b = d.body;
var s = b.style;
var ieVersion = null;
var property;
// Test IE10 properties
for (var i = 0; i < ie10Styles.length; i++) {
property = ie10Styles[i];
if (s[property] != undefined) {
ieVersion = "ie10";
createEl("IE10 style found: " + property);
}
}
// Test IE11 properties
for (var i = 0; i < ie11Styles.length; i++) {
property = ie11Styles[i];
if (s[property] != undefined) {
ieVersion = "ie11";
createEl("IE11 style found: " + property);
}
}
if (ieVersion) {
b.className = ieVersion;
$('#versionId').html('Version: ' + ieVersion);
} else {
createEl('Not IE10 or 11.');
}
/*
* Just a little helper to create a DOM element
*/
function createEl(content) {
el = d.createElement('div');
el.innerHTML = content;
b.appendChild(el);
}
/*
* List of IE CSS stuff:
* http://msdn.microsoft.com/en-us/library/ie/hh869403(v=vs.85).aspx
*/
body {
font: 1.25em sans-serif;
}
div {
background: red;
color:#fff;
padding: 1em;
}
.ie10 div {
background: green;
margin-bottom:.5em;
}
.ie11 div {
background: purple;
margin-bottom:.5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1>Detect IE10 and IE11 by CSS Capability Testing</h1>
<h2 id="versionId"></h2>
当我发现它们时,我会用更多样式更新代码示例。
注意:这几乎肯定会将IE12和IE13识别为“IE11”,因为这些样式可能会发扬光大。随着新版本的推出,我将进一步增加测试,希望能够再次依赖Modernizr。
我正在使用此测试进行回退行为。后备行为只是不那么迷人的样式,它没有减少功能。
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
}
添加所有类或CSS属性。
这似乎有效:
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
}
https://www.limecanvas.com/css-hacks-for-targeting-ie-10-and-above/
您可以正常编写IE11代码,然后使用@supports
并检查IE11中不支持的属性,例如grid-area: auto
。
然后,您可以在其中编写现代浏览器样式。 IE不支持@supports
规则并将使用原始样式,而这些将在支持@supports
的现代浏览器中被覆盖。
.my-class {
// IE the background will be red
background: red;
// Modern browsers the background will be blue
@supports (grid-area: auto) {
background: blue;
}
}
这是2017年的答案,你可能只关心区分<= IE11和> IE11(“Edge”):
@supports not (old: ie) { /* code for not old IE here */ }
更多示范性示例:
body:before { content: 'old ie'; }
/**/@supports not (old: ie) {
body:before { content: 'not old ie'; }
/**/}
这是有效的,因为IE11实际上甚至不支持@supports
和all other relevant browser/version combinations。
这对我有用
if(navigator.userAgent.match(/Trident.*rv:11\./)) {
$('body').addClass('ie11');
}
然后在css文件中加上前缀的东西
body.ie11 #some-other-div
这个浏览器何时准备好死?
看看这篇文章:CSS: User Agent Selectors
基本上,当您使用此脚本时:
var b = document.documentElement;
b.setAttribute('data-useragent', navigator.userAgent);
b.setAttribute('data-platform', navigator.platform );
b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');
您现在可以使用CSS来定位任何浏览器/版本。
因此,对于IE11,我们可以这样做:
html[data-useragent*='rv:11.0']
{
color: green;
}
试试这个:
/*------Specific style for IE11---------*/
_:-ms-fullscreen, :root
.legend
{
line-height: 1.5em;
position: relative;
top: -1.1em;
}