在某些情况下,例如特定于Internet Explorer的CSS或特定于Internet Explorer的JavaScript代码,如何仅将Internet Explorer 10定位?
我试过了,但是不起作用:
<!--[if IE 10]> <html class="no-js ie10" lang="en"> <![endif]-->
<!--[if !IE]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
Internet Explorer 10忽略条件注释,并使用<html lang="en" class="no-js">
代替<html class="no-js ie10" lang="en">
。
也许您可以尝试这样的jQuery:
if ($.browser.msie && $.browser.version === 10) {
$("html").addClass("ie10");
}
要使用此方法,您必须包括jQuery Migrate库,因为此功能已从主jQuery库中删除。
对我来说很好。但是肯定不能代替条件注释!
我不会使用JavaScriptnavigator.userAgent
或$ .browser(使用navigator.userAgent
),因为它可以被欺骗。
要定位Internet Explorer 9、10和11(注意:也是最新的Chrome):
@media screen and (min-width:0\0) {
/* Enter CSS here */
}
要定位Internet Explorer 10:
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS here */
}
定位边缘浏览器:
@supports (-ms-accelerator:true) {
.selector { property:value; }
}
资料来源:
- 将Internet Explorer特定的CSS移到@media块中
- 如何在CSS中定位Internet Explorer 10和11
- 适用于Windows 10和Microsoft Edge Web浏览器的CSS黑客
我在这个网站上找到了一个解决方案,有人对此发表了宝贵的评论:
解决方案是:
if (Function('/*@cc_on return document.documentMode===10@*/')()){
document.documentElement.className+=' ie10';
}
它
- 不需要条件注释;
- 即使注释条压缩/处理也有效;
- 在Internet Explorer 11中没有添加ie10类;
- 与以Internet Explorer 10兼容模式运行的Internet Explorer 11更有可能按预期工作;
- 不需要独立的脚本标签(可以直接添加到其他JavaScript代码中)。
- 不需要jQuery进行测试
Internet Explorer 10不再尝试读取条件注释。这意味着它将像对待其他浏览器一样对待条件注释:与常规HTML注释一样,它被完全忽略。以问题中给出的标记为例,包括IE10在内的所有浏览器都将完全忽略注释部分(突出显示为灰色)。HTML5标准没有提及条件注释语法,这正是他们选择停止在IE10中支持它的原因。
但是请注意,仍然支持JScript中的条件编译,如注释和最新答案所示。这不是最终版本要离开要么,不像jQuery.browser
。当然,不用说,用户代理嗅探仍然像以往一样脆弱,在任何情况下都不应使用。
如果确实必须以IE10为目标,请使用有条件的编译(可能会在不久的将来获得支持),或者(如果可以帮助您)使用功能检测库(例如Modernizr)来代替(或与浏览器一起检测)。除非您的用例需要noscript或在服务器端安装IE10,否则用户代理嗅探将比可行的选择更令人头疼。
听起来很麻烦,但请记住,作为一个现代的浏览器这是高度符合的到今天的Web标准1,假设你已经写了互操作的代码是高度符合标准,你不应该要为IE10预留特殊的代码,除非绝对必要,也就是说,就行为和渲染而言,它应该类似于其他浏览器。2鉴于IE的历史,这听起来有些牵强,但是您期望Firefox或Chrome多少次表现出相同的方式却令人沮丧?
- Firefox
box-sizing
多年来不支持无前缀 - Firefox历来具有奇怪的轮廓行为,多年来也是如此
- Firefox在定位表单元时拒绝合理行为,将未定义行为作为借口,而其他浏览器似乎可以应对
- Safari和Chrome有很多 的 麻烦 与 一定的 CSS 选择器,有时修复了真正带你回到过去的好醇” IE5,IE6和IE7的天
- 一般而言,Chrome似乎在重涂部门遇到很多麻烦,例如,更新媒体样式后无法正确重排版面;看来,只有通过强制重涂才能再次解决IE5 / 6/7级别的问题,才能解决Chrome的一半错误
- 已知有一些WebKit完全是对某些功能的支持,这意味着它们实际上击败了所有功能的特征检测机制
如果您确实有理由要针对特定的浏览器,则一定要使用提供给您的其他工具来将它们嗅出。我只是说,今天要找到这样一个理由比现在要困难得多,这实际上不是您可以依靠的东西。
1 不仅IE10,而且IE9甚至是处理大多数成熟CSS2.1标准的IE8都比Chrome更好,这仅仅是因为IE8如此专注于标准合规性(当时CSS2.1已经相当稳定,只有很小的差异)根据今天的建议),而Chrome似乎只是半精打磨的尖端伪标准技术演示而已。
2 我这样说时可能会有偏见,但可以肯定的是。如果您的代码可以在其他浏览器上运行,但不能在IE上运行,则与3年前使用IE的早期版本相比,使用您自己的代码而不是IE10的可能性要大得多。同样,我可能有偏见,但老实说:你不是吗?只要看看您的评论。
IE标准支持文档是一个不错的起点。
这是在JavaScript中定位IE10的方法:
if ("onpropertychange" in document && !!window.matchMedia) {
...
}
这是在CSS中定位IE10的方法:
@media all and (-ms-high-contrast: none) {
...
}
如果需要通过CSS过滤或重置IE11,请参见另一个问题:
如何为IE 11编写CSS hack?
此处发布的两种解决方案(稍作修改)都可以工作:
<!--[if !IE]><!--><script>if(/*@cc_on!@*/false){document.documentElement.className='ie10';}</script><!--<![endif]-->
要么
<script>if(Function('/*@cc_on return 10===document.documentMode@*/')()){document.documentElement.className='ie10';}</script>
在CSS链接之前,请将以上任一行包含在html页的head标记内。然后在css文件中,指定以“ ie10”类作为父类的样式:
.ie10 .myclass1 { }
和瞧!-其他浏览器保持不变。而且您不需要jQuery。您可以在此处查看示例如何实现的示例:http : //kardash.net。
我编写了一个名为Layout Engine的小型香草JavaScript插件,该插件可让您以一种无法伪造的简单方式来检测IE 10(以及其他所有浏览器),这与用户代理嗅探不同。
它将呈现引擎名称作为类添加到html标记上,并返回包含供应商和版本的JavaScript对象(如果适用)
查看我的博客文章:http : //mattstow.com/layout-engine.html并在GitHub上获取代码:https : //github.com/stowball/Layout-Engine
我使用此脚本-这是过时的,但是对于定向单独的Internet Explorer 10样式表或JavaScript文件(仅当浏览器为Internet Explorer 10时才包含)是有效的,与使用条件注释的方式相同。不需要jQuery或其他插件。
<script>
/*@cc_on
@if (@_jscript_version == 10)
document.write(' <link type= "text/css" rel="stylesheet" href="your-ie10-styles.css" />');
@end
@*/
</script >
您可以使用PHP为IE 10添加样式表
喜欢:
if (stripos($_SERVER['HTTP_USER_AGENT'], 'MSIE 10')) {
<link rel="stylesheet" type="text/css" href="../ie10.css" />
}
如果必须执行此操作,则可以在JavaScript中检查用户代理字符串:
var isIE10 = !!navigator.userAgent.match(/MSIE 10/);
正如其他人所提到的,我总是建议您使用特征检测。
如果要使用Vanilla JavaScript定位IE 10,则可能要尝试CSS属性检测:
if (document.body.style.msTouchAction != undefined) {
document.body.className = 'ie10';
}
CSS属性
而不是msTouchAction
您也可以使用这些CSS属性之一,因为它们当前仅在IE 10中可用。但是将来可能会改变。
- msTouchAction
- msWrapFlow
- msWrapMargin
- msWrapThrough
- msScrollLimit
- msScrollLimitXMin
- msScrollLimitYMin
- msScrollLimitXMax
- msScrollLimitYMax
- msFlexbox
- msFlex
- msFlexOrder
测试页
我将CodePen上所有属性的测试页放在一起。
clipBoardData是仅在IE中可用的函数,因此,如果您要定位所有IE版本,则可以使用
<script type="text/javascript">
if (window.clipboardData)
alert("You are using IE!");
</script>
IE10 +和IE9的CSS
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ styles */
}
@media screen\0 {
/* IE8,9,10 styles*/
}
您可以使用功能检测来查看浏览器是否为IE10或更高版本,如下所示:
var isIE = false;
if (window.navigator.msPointerEnabled) {
isIE = true;
}
仅当> IE9时为真
Conditionizr (请参阅文档)将向您的html元素(包括ie10 )添加浏览器CSS类。
使用JavaScript:
if (/Trident/g.test(navigator.userAgent)) { // detect trident engine so IE
document.getElementsByTagName('html')[0].className= 'no-js ie'; }
适用于所有IE。
IE08 => 'Trident/4.0'
IE09 => 'Trident/5.0'
IE10 => 'Trident/6.0'
IE11 => 'Trident/7.0'
因此/Trident/g
,/Trident/x.0/g
在哪里x = 4, 5, 6
或7
(或8
将来)更改。
我只想添加我的IE检测版本。它是基于http://james.padolsey.com/javascript/detect-ie-in-js-using-conditional-comments/中的代码段并且还支持ie10和ie11。它检测到IE 5到11。
您需要做的就是将其添加到某个位置,然后您始终可以通过简单的条件进行检查。isIE
如果不是IE,则全局变量将是未定义的,否则它将是版本号。因此,您可以轻松添加if (isIE && isIE < 10)
类似的内容。
var isIe = (function(){
if (!(window.ActiveXObject) && "ActiveXObject" in window) { return 11; /* IE11 */ }
if (Function('/*@cc_on return /^10/.test(@_jscript_version) @*/')()) { return 10; /* IE10 */ }
var undef,
v = 3, div = document.createElement('div'), all = div.getElementsByTagName('i');
while (
div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
all[0]
);
return v > 4 ? v : undef;
}());
对我来说,以下代码可以正常工作,所有条件注释都可以在所有IE版本中使用:
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 11)|!(IE)]><!--> <html> <!--<![endif]-->
<script>
if (document.documentMode===10){
document.documentElement.className+=' ie10';
}
else if (document.documentMode===11){
document.documentElement.className+=' ie11';
}
</script>
我在Windows 8.1上,不确定是否与ie11更新有关...
这是我为Internet Explorer做自定义CSS的方法:
在我的JavaScript文件中:
function isIE () {
var myNav = navigator.userAgent.toLowerCase();
return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
}
jQuery(document).ready(function(){
if(var_isIE){
if(var_isIE == 10){
jQuery("html").addClass("ie10");
}
if(var_isIE == 8){
jQuery("html").addClass("ie8");
// you can also call here some function to disable things that
//are not supported in IE, or override browser default styles.
}
}
});
然后在我的CSS文件中,定义每个不同的样式:
.ie10 .some-class span{
.......
}
.ie8 .some-class span{
.......
}
查看http://suhasrathod.wordpress.com/2013/04/29/ie10-css-hacks/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10-specific styles go here */
}
使用babel或打字稿转换此代码js
const browser = () => {
// "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3576.0 Safari/537.36"
// "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.17 Safari/537.36"
// "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/18.17763"
// "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:64.0) Gecko/20100101 Firefox/64.0"
// "Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; rv:11.0) like Gecko"
// "Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)"
// "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)"
// "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)"
// "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)"
const _userAgent = navigator.userAgent;
const br = {
"Chrome": "Chrome",
"Edge": "Edge",
"Firefox": "Firefox",
".NET CLR": "Internet Explorer 11",
};
const nobr = {
"MSIE 10.0": "Internet Explorer 10",
"MSIE 9.0": "Internet Explorer 9",
"MSIE 8.0": "Internet Explorer 8",
"MSIE 7.0": "Internet Explorer 7"
};
let thisBrow = "Unknown";
for (const keys in br) {
if (br.hasOwnProperty(keys)) {
if (_userAgent.includes(keys)) {
thisBrow = br[keys];
for (const key in nobr) {
if (_userAgent.includes(key)) {
thisBrow = nobr[key];
}
}
}
}
}
return thisBrow;
};
这个答案使我有90%的解决方法。我在这里的Microsoft网站上找到了答案的其余部分。
下面的代码是我用来定位所有目标的代码,即通过添加.ie类 <html>
使用jQuery(在1.9+版本中不推荐使用.browser以便于用户代理,请参见http://api.jquery.com/jQuery.browser/)来添加.ie类:
// ie identifier
$(document).ready(function () {
if (navigator.appName == 'Microsoft Internet Explorer') {
$("html").addClass("ie");
}
});
如果您不介意以IE10及更高版本和非IE浏览器为目标,则可以使用以下条件注释:
<!--[if gt IE 9]><!--> Your code here. <!--<![endif]-->
源自http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-n
如果确实需要,可以通过将以下行添加到来使条件注释生效<head>
:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
CSS的现代解决方案
html[data-useragent*='MSIE 10.0'] .any {
your-style: here;
}
文章标签:conditional-comments , css , html , internet-explorer-10 , javascript
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!