有没有一种好的方法使用jQuery检测用户浏览器是否为Internet Explorer?
我在IE中使用PNG图形时遇到问题,希望只有用户使用IE查看网站时才将它们替换为GIF。
有没有一种好的方法使用jQuery检测用户浏览器是否为Internet Explorer?
我在IE中使用PNG图形时遇到问题,希望只有用户使用IE查看网站时才将它们替换为GIF。
你可以使用$.browser
,但是使用浏览器检测不是好的选择:
if($.browser.msie) { /* IE */ }
更好的选择是$.support
,它是如下的特性检测:
if(!$.support.opacity) { /* IE 6-8 */ }
$.support.opacity
在不支持使用opacity
进行样式设置的浏览器中为false(尽管IE 7-8可以处理透明PNG文件,但这仍然不是理想的选择,具体取决于您的需求... 我认为这会给IE 7/8用户带来次优的体验)。
你真正应该做的是针对不支持透明PNG的IE6进行定位,方法如下:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="IE6ImageStyles.css">
<![endif]-->
是的,你可以,但他们更喜欢你使用 jQuery.support
: http://api.jquery.com/jQuery.support/.
在这种情况下,请使用 jQuery.support.opacity
。
编辑:假设这是关于不透明度的。
$.browser已被移除于1.9版本,现在建议使用$.support来进行特性检测。
$.browser.webkit
$.browser.safari
$.browser.opera
$.browser.msie
$.browser.mozilla
if ($.browser.msie) {
//do something
}
else if ($.browser.mozilla) {
//do something else
}
兼容jQuery 1.3
== true
是多余的。只需调用 if ($.browser.msie) { }
就可以正常工作。 - Ortund<script>
jQuery.each(jQuery.browser, function(i, val) {
$("<div>" + i + " : <span>" + val + "</span>")
.appendTo(document.body);
});</script>
$.browser.msie
用于IE浏览器
我知道这不是一个答案,但我无法在评论中发布它!
如果你要使用JavaScript,这段代码可以解决IE6的PNG问题。我没有经常使用它,但据我所知,你需要一个名为x.gif的透明GIF图像,它会自动完成其余部分。
// JavaScript Document
var supersleight = function() {
var root = false;
var applyPositioning = true;
// Path to a transparent GIF image
var shim = 'x.gif';
// RegExp to match above GIF image name
var shim_pattern = /x\.gif$/i;
var fnLoadPngs = function() {
if (root) {
root = document.getElementById(root);
}else{
root = document;
}
for (var i = root.all.length - 1, obj = null; (obj = root.all[i]); i--) {
// background pngs
if (obj.currentStyle.backgroundImage.match(/\.png/i) !== null) {
bg_fnFixPng(obj);
}
// image elements
if (obj.tagName=='IMG' && obj.src.match(/\.png$/i) !== null){
el_fnFixPng(obj);
}
// apply position to 'active' elements
if (applyPositioning && (obj.tagName=='A' || obj.tagName=='INPUT') && obj.style.position === ''){
obj.style.position = 'relative';
}
}
};
var bg_fnFixPng = function(obj) {
var mode = 'scale';
var bg = obj.currentStyle.backgroundImage;
var src = bg.substring(5,bg.length-2);
if (obj.currentStyle.backgroundRepeat == 'no-repeat') {
mode = 'crop';
}
obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + mode + "')";
obj.style.backgroundImage = 'url('+shim+')';
};
var el_fnFixPng = function(img) {
var src = img.src;
img.style.width = img.width + "px";
img.style.height = img.height + "px";
img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')";
img.src = shim;
};
var addLoadEvent = function(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
};
}
};
return {
init: function() {
addLoadEvent(fnLoadPngs);
},
limitTo: function(el) {
root = el;
},
run: function() {
fnLoadPngs();
}
};
}();
// limit to part of the page ... pass an ID to limitTo:
// supersleight.limitTo('header');
supersleight.init();