css3的选择器兼容
可以在ie8中兼容css3的选择器
1.DOMAssistantCompressed.js + ie-css3.js 必须使用外联样式，内联样式无效
不同分辨率屏幕的兼容问题
可以使用rem单位，在ie9+中可以兼容，但是ie8不兼容，需要在ie8中兼容，需要使用rem.js 同样的，不可以使用内联样式，需要使用外部css，使用rem时图片的宽和高也需要设置rem
<script>
// 根据屏幕分辨率，重新设置html的font-size
function handleResize() {
var htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
var htmlDom = document.getElementsByTagName('html')[0];
htmlDom.style.fontSize = 100 / 1920 * htmlWidth + 'px';
}
handleResize();
window.onresize = handleResize;
</script>
适合ie6+浏览器的轮播图插件
superslider.js
官网:http://www.superslide2.com/
可在ie8+浏览器中使用的播放器插件
video.js，但是实际在使用时，却发现ie8不支持，video.js官方提示ie8下会加载flash播放器， 而flash插件却已经不在支持
ie浏览器中css hack
css hack可以让css代码根据hack语法在特定的ie浏览器中渲染 其余部分包含ie 条件注释法，但是只支持到ie10
介绍: https://blog.csdn.net/dayu9216/article/details/70225261/
ie8浏览器中使用rgba语法
https://www.cnblogs.com/iflygofy/p/7008770.html 主要是使用filter
ie浏览器中使用border-radius
在CSS文件中引入PIE.htc文件时没有这样的问题
opcity无效
div{ opacity:0.8; filter:Alpha(opacity=80); }
ie8绝对定位的元素居中问题
只需要设置margin-left:-元素的一半像素
div{
width: 100px;
position: absolute;
left: 50%;
margin-left: -50px;
}
也可以使用
-ms-transform:translate(-50%, 0);
ie9+可使用transform: translateX(-50%);
ie下input placeholer无效处理(IE6+)
可采用jquery-placeholer.js解决，一般情况下确实没有问题，如果你希望可以通过点击按钮或图标查看密码，即动态切换input的type，则该插件就会有bug
ie低版本下，loading动画使用(IE6+)
可使用spin.js低版本的插件
介绍地址:https://www.html5tricks.com/demo/jquery-loading-spin-js/index.html
弹窗提示插件(IE9+)
界面非常类似element
使用：
<script src="https://unpkg.com/coco-message/coco-message.min.js"></script>
cocoMessage.config({
//配置全局参数
duration: 10000,
});
//对参数没有顺序要求，
cocoMessage会根据参数的数据类型进行解析
cocoMessage.info(3000, "请先登录！", function () {
console.log("close");
});
//可以使用dom节点做内容
var div = document.createElement("div");
div.innerText = "修改成功！";
cocoMessage.success(div); //duration为0时显示关闭按钮
cocoMessage.warning("需要手动关闭", 0);
cocoMessage.error("修改失败！", 3000); //loading可以选择是否展示关闭按钮
var closeMsg = cocoMessage.loading(true);
setTimeout(function () {
closeMsg();
}, 4000);
cocoMessage.destroyAll();
该插件在IE9下，提示框需要修改样式，修改如下：
dd
遮罩插件 jquery.mloading.js（IE8+）
地址:https://www.jq22.com/jquery-info12227
3D轮播插件(IE6+)
jquery.easing.1.3.js+jquery.roundabout.min.js 插件效果:https://www.jq22.com/jquery-info21879
判断IE
1、判断IE浏览器的具体版本
function IEVersion() {
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
if (isIE) {
var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
reIE.test(userAgent);
var fIEVersion = parseFloat(RegExp["$1"]);
if (fIEVersion == 7) {
return 7;
} else if (fIEVersion == 8) {
return 8;
} else if (fIEVersion == 9) {
return 9;
} else if (fIEVersion == 10) {
return 10;
} else {
return 6;//IE版本<=7
}
} else if (isEdge) {
return 'edge';//edge
} else if (isIE11) {
return 11; //IE11
} else {
return -1;//不是ie浏览器
}
}
2、判断是否是IE 11及以下或者其他(其他里包括IE edge)
function isIE() {
if (!!window.ActiveXObject || "ActiveXObject" in window) {
return true;
} else {
return false;
}
}
浏览器页面置灰
/*主流浏览器*/
html {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(1);
zoom: 1;
}
* {
filter: gray(enabled=1) !important;
}
/*或者（我为了保险起见，两段代码都添加了）*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
filter: gray(enabled=1) !important;
}
/*end*/
IE浏览器
<script>
/*
* -- grayscale.js --
* Copyright (C) James Padolsey (http://james.padolsey.com)
*
*/
var grayscale = (function () {
var config = {
colorProps: ['color', 'backgroundColor', 'borderBottomColor', 'borderTopColor', 'borderLeftColor',
'borderRightColor', 'backgroundImage'],
externalImageHandler: {
/* Grayscaling externally hosted images does not work
- Use these functions to handle those images as you so desire */
/* Out of convenience these functions are also used for browsers
like Chrome that do not support CanvasContext.getImageData */
init: function (el, src) {
if (el.nodeName.toLowerCase() === 'img') {
// Is IMG element...
} else {
// Is background-image element:
// Default - remove background images
data(el).backgroundImageSRC = src;
el.style.backgroundImage = '';
}
},
reset: function (el) {
if (el.nodeName.toLowerCase() === 'img') {
// Is IMG element...
} else {
// Is background-image element:
el.style.backgroundImage = 'url(' + (data(el).backgroundImageSRC || '') + ')';
}
}
}
},
log = function () {
try {
window.console.log.apply(console, arguments);
} catch (e) { };
},
isExternal = function (url) {
// Checks whether URL is external: 'CanvasContext.getImageData'
// only works if the image is on the current domain.
return (new RegExp('https?://(?!' + window.location.hostname + ')')).test(url);
},
data = (function () {
var cache = [0],
expando = 'data' + (+new Date());
return function (elem) {
var cacheIndex = elem[expando],
nextCacheIndex = cache.length;
if (!cacheIndex) {
cacheIndex = elem[expando] = nextCacheIndex;
cache[cacheIndex] = {};
}
return cache[cacheIndex];
};
})(),
desatIMG = function (img, prepare, realEl) {
// realEl is only set when img is temp (for BG images)
var canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
height = img.naturalHeight || img.offsetHeight || img.height,
width = img.naturalWidth || img.offsetWidth || img.width,
imgData;
canvas.height = height;
canvas.width = width;
context.drawImage(img, 0, 0);
try {
imgData = context.getImageData(0, 0, width, height);
} catch (e) { }
if (prepare) {
desatIMG.preparing = true;
// Slowly recurse through pixels for prep,
// :: only occurs on grayscale.prepare()
var y = 0;
(function () {
if (!desatIMG.preparing) {
return;
}
if (y === height) {
// Finished!
context.putImageData(imgData, 0, 0, 0, 0, width, height);
realEl ? (data(realEl).BGdataURL = canvas.toDataURL()) :
(data(img).dataURL = canvas.toDataURL())
}
for (var x = 0; x < width; x++) {
var i = (y * width + x) * 4;
// Apply Monoschrome level across all channels:
imgData.data[i] = imgData.data[i + 1] = imgData.data[i + 2] =
RGBtoGRAYSCALE(imgData.data[i], imgData.data[i + 1], imgData.data[i + 2]);
}
y++;
setTimeout(arguments.callee, 0);
})();
return;
} else {
// If desatIMG was called without 'prepare' flag
// then cancel recursion and proceed with force! (below)
desatIMG.preparing = false;
}
for (var y = 0; y < height; y++) {
for (var x = 0; x < width; x++) {
var i = (y * width + x) * 4;
// Apply Monoschrome level across all channels:
imgData.data[i] = imgData.data[i + 1] = imgData.data[i + 2] =
RGBtoGRAYSCALE(imgData.data[i], imgData.data[i + 1], imgData.data[i + 2]);
}
}
context.putImageData(imgData, 0, 0, 0, 0, width, height);
return canvas;
},
getStyle = function (el, prop) {
var style = document.defaultView && document.defaultView.getComputedStyle ?
document.defaultView.getComputedStyle(el, null)[prop] :
el.currentStyle[prop];
// If format is #FFFFFF: (convert to RGB)
if (style && /^#[A-F0-9]/i.test(style)) {
var hex = style.match(/[A-F0-9]{2}/ig);
style = 'rgb(' + parseInt(hex[0], 16) + ',' +
parseInt(hex[1], 16) + ',' +
parseInt(hex[2], 16) + ')';
}
return style;
},
RGBtoGRAYSCALE = function (r, g, b) {
// Returns single monochrome figure:
return parseInt((0.2125 * r) + (0.7154 * g) + (0.0721 * b), 10);
},
getAllNodes = function (context) {
var all = Array.prototype.slice.call(context.getElementsByTagName('*'));
all.unshift(context);
return all;
};
var init = function (context) {
// Handle if a DOM collection is passed instead of a single el:
if (context && context[0] && context.length && context[0].nodeName) {
// Is a DOM collection:
var allContexts = Array.prototype.slice.call(context),
cIndex = -1,
cLen = allContexts.length;
while (++cIndex < cLen) {
init.call(this, allContexts[cIndex]);
}
return;
}
context = context || document.documentElement;
if (!document.createElement('canvas').getContext) {
context.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)';
context.style.zoom = 1;
return;
}
var all = getAllNodes(context),
i = -1,
len = all.length;
while (++i < len) {
var cur = all[i];
if (cur.nodeName.toLowerCase() === 'img') {
var src = cur.getAttribute('src');
if (!src) {
continue;
}
if (isExternal(src)) {
config.externalImageHandler.init(cur, src);
} else {
data(cur).realSRC = src;
try {
// Within try statement just encase there's no support....
cur.src = data(cur).dataURL || desatIMG(cur).toDataURL();
} catch (e) {
config.externalImageHandler.init(cur, src);
}
}
} else {
for (var pIndex = 0, pLen = config.colorProps.length; pIndex < pLen; pIndex++) {
var prop = config.colorProps[pIndex],
style = getStyle(cur, prop);
if (!style) {
continue;
}
if (cur.style[prop]) {
data(cur)[prop] = style;
}
// RGB color:
if (style.substring(0, 4) === 'rgb(') {
var monoRGB = RGBtoGRAYSCALE.apply(null, style.match(/\d+/g));
cur.style[prop] = style = 'rgb(' + monoRGB + ',' + monoRGB + ',' + monoRGB + ')';
continue;
}
// Background Image:
if (style.indexOf('url(') > -1) {
var urlPatt = /\(['"]?(.+?)['"]?\)/,
url = style.match(urlPatt)[1];
if (isExternal(url)) {
config.externalImageHandler.init(cur, url);
data(cur).externalBG = true;
continue;
}
// data(cur).BGdataURL refers to caches URL (from preparation)
try {
var imgSRC = data(cur).BGdataURL || (function () {
var temp = document.createElement('img');
temp.src = url;
return desatIMG(temp).toDataURL();
})();
cur.style[prop] = style.replace(urlPatt, function (_, url) {
return '(' + imgSRC + ')';
});
} catch (e) {
config.externalImageHandler.init(cur, url);
}
}
}
}
}
};
init.reset = function (context) {
// Handle if a DOM collection is passed instead of a single el:
if (context && context[0] && context.length && context[0].nodeName) {
// Is a DOM collection:
var allContexts = Array.prototype.slice.call(context),
cIndex = -1,
cLen = allContexts.length;
while (++cIndex < cLen) {
init.reset.call(this, allContexts[cIndex]);
}
return;
}
context = context || document.documentElement;
if (!document.createElement('canvas').getContext) {
context.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=0)';
return;
}
var all = getAllNodes(context),
i = -1,
len = all.length;
while (++i < len) {
var cur = all[i];
if (cur.nodeName.toLowerCase() === 'img') {
var src = cur.getAttribute('src');
if (isExternal(src)) {
config.externalImageHandler.reset(cur, src);
}
cur.src = data(cur).realSRC || src;
} else {
for (var pIndex = 0, pLen = config.colorProps.length; pIndex < pLen; pIndex++) {
if (data(cur).externalBG) {
config.externalImageHandler.reset(cur);
}
var prop = config.colorProps[pIndex];
cur.style[prop] = data(cur)[prop] || '';
}
}
}
};
init.prepare = function (context) {
// Handle if a DOM collection is passed instead of a single el:
if (context && context[0] && context.length && context[0].nodeName) {
// Is a DOM collection:
var allContexts = Array.prototype.slice.call(context),
cIndex = -1,
cLen = allContexts.length;
while (++cIndex < cLen) {
init.prepare.call(null, allContexts[cIndex]);
}
return;
}
// Slowly recurses through all elements
// so as not to lock up on the user.
context = context || document.documentElement;
if (!document.createElement('canvas').getContext) {
return;
}
var all = getAllNodes(context),
i = -1,
len = all.length;
while (++i < len) {
var cur = all[i];
if (data(cur).skip) {
return;
}
if (cur.nodeName.toLowerCase() === 'img') {
if (cur.getAttribute('src') && !isExternal(cur.src)) {
desatIMG(cur, true);
}
} else {
var style = getStyle(cur, 'backgroundImage');
if (style.indexOf('url(') > -1) {
var urlPatt = /\(['"]?(.+?)['"]?\)/,
url = style.match(urlPatt)[1];
if (!isExternal(url)) {
var temp = document.createElement('img');
temp.src = url;
desatIMG(temp, true, cur);
}
}
}
}
};
return init;
})();
grayscale(document.body);
$(function () {
console.log("grayscale");
grayscale(document.body);
})
评论列表
已有0条评论