常见浏览器兼容性问题及解决方案

问题一：背景颜色透明（设置background的rgba属性在ie下的兼容性问题）

解决方案：

.box{ background:rgba(0,0,0,0.5); filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000); //ie下使用滤镜 }

问题二：圆角、阴影

解决方案：

1.ie-css.htc

--Do not remove this if you are using--Original Author: Remiz RahnasOriginal Author URL: date: 2008/09/24Changes by Nick Fetchak:- IE8 standards mode compatibility- VML elements now positioned behind original box rather than inside of it - should be less prone to breakage- Added partial support for 'box-shadow' style- Checks for VML support before doing anything- Updates VML element size and position via timer and also via window resize event- lots of other small thingsPublished date : 2010/03/1 to TheBrightLines.com for enlightening me about the DropShadow filter<public:attach event="ondocumentready" onevent="ondocumentready('v08vnSVo78t4JfjH')" /><script type="text/javascript">timer_length = 200; // Millisecondsborder_opacity = false; // Use opacity on borders of rounded-corner elements? Note: This causes antialiasing issues// supportsVml() borrowed from >function supportsVml() { if (typeof supportsVml.supported == "undefined") {  var a = document.body.appendChild(document.createElement('div'));  a.innerHTML = '<v:shape id="vml_flag1" adj="1" />';  var b = a.firstChild;  b.style.behavior = "url(#default#VML)";  supportsVml.supported = b ? typeof b.adj == "object": true;  a.parentNode.removeChild(a); } return supportsVml.supported}// findPos() borrowed from >function findPos(obj) { var curleft = curtop = 0; if (obj.offsetParent) {  do {   curleft += obj.offsetLeft;   curtop += obj.offsetTop;  } while (obj = obj.offsetParent); } return({  'x': curleft,  'y': curtop });}function createBoxShadow(element, vml_parent) { var style = element.currentStyle['iecss3-box-shadow'] || element.currentStyle['-moz-box-shadow'] || element.currentStyle['-webkit-box-shadow'] || element.currentStyle['box-shadow'] || ''; var match = style.match(/^(\d+)px (\d+)px (\d+)px/); if (!match) { return(false); } var shadow = document.createElement('v:roundrect'); shadow.userAttrs = {  'x': parseInt(RegExp.$1 || 0),  'y': parseInt(RegExp.$2 || 0),  'radius': parseInt(RegExp.$3 || 0) / 2 }; shadow.position_offset = {  'y': (0 - vml_parent.pos_ieCSS3.y - shadow.userAttrs.radius + shadow.userAttrs.y),  'x': (0 - vml_parent.pos_ieCSS3.x - shadow.userAttrs.radius + shadow.userAttrs.x) }; shadow.size_offset = {  'width': 0,  'height': 0 }; shadow.arcsize = element.arcSize +'px'; shadow.style.display = 'block'; shadow.style.position = 'absolute'; shadow.style.top = (element.pos_ieCSS3.y + shadow.position_offset.y) +'px'; shadow.style.left = (element.pos_ieCSS3.x + shadow.position_offset.x) +'px'; shadow.style.width = element.offsetWidth +'px'; shadow.style.height = element.offsetHeight +'px'; shadow.style.antialias = true; shadow.className = 'vml_box_shadow'; shadow.style.zIndex = element.zIndex - 1; shadow.style.filter = 'progid:DXImageTransform.Microsoft.Blur(pixelRadius='+ shadow.userAttrs.radius +',makeShadow=true,shadowOpacity='+ element.opacity +')'; element.parentNode.appendChild(shadow); //element.parentNode.insertBefore(shadow, element.element); // For window resizing element.vml.push(shadow); return(true);}function createBorderRect(element, vml_parent) { if (isNaN(element.borderRadius)) { return(false); } element.style.background = 'transparent'; element.style.borderColor = 'transparent'; var rect = document.createElement('v:roundrect'); rect.position_offset = {  'y': (0.5 * element.strokeWeight) - vml_parent.pos_ieCSS3.y,  'x': (0.5 * element.strokeWeight) - vml_parent.pos_ieCSS3.x }; rect.size_offset = {  'width': 0 - element.strokeWeight,  'height': 0 - element.strokeWeight }; rect.arcsize = element.arcSize +'px'; rect.strokeColor = element.strokeColor; rect.strokeWeight = element.strokeWeight +'px'; rect.stroked = element.stroked; rect.className = 'vml_border_radius'; rect.style.display = 'block'; rect.style.position = 'absolute'; rect.style.top = (element.pos_ieCSS3.y + rect.position_offset.y) +'px'; rect.style.left = (element.pos_ieCSS3.x + rect.position_offset.x) +'px'; rect.style.width = (element.offsetWidth + rect.size_offset.width) +'px'; rect.style.height = (element.offsetHeight + rect.size_offset.height) +'px'; rect.style.antialias = true; rect.style.zIndex = element.zIndex - 1; if (border_opacity && (element.opacity < 1)) {  rect.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity='+ parseFloat(element.opacity * 100) +')'; } var fill = document.createElement('v:fill'); fill.color = element.fillColor; fill.src = element.fillSrc; fill.className = 'vml_border_radius_fill'; fill.type = 'tile'; fill.opacity = element.opacity; // Hack: IE6 doesn't support transparent borders, use padding to offset original element isIE6 = /msie|MSIE 6/.test(navigator.userAgent); if (isIE6 && (element.strokeWeight > 0)) {  element.style.borderStyle = 'none';  element.style.paddingTop = parseInt(element.currentStyle.paddingTop || 0) + element.strokeWeight;  element.style.paddingBottom = parseInt(element.currentStyle.paddingBottom || 0) + element.strokeWeight; } rect.appendChild(fill); element.parentNode.appendChild(rect); //element.parentNode.insertBefore(rect, element.element); // For window resizing element.vml.push(rect); return(true);}function createTextShadow(element, vml_parent) { if (!element.textShadow) { return(false); } var match = element.textShadow.match(/^(\d+)px (\d+)px (\d+)px (#?\w+)/); if (!match) { return(false); } //var shadow = document.createElement('span'); var shadow = element.cloneNode(true); var radius = parseInt(RegExp.$3 || 0); shadow.userAttrs = {  'x': parseInt(RegExp.$1 || 0) - (radius),  'y': parseInt(RegExp.$2 || 0) - (radius),  'radius': radius / 2,  'color': (RegExp.$4 || '#000') }; shadow.position_offset = {  'y': (0 - vml_parent.pos_ieCSS3.y + shadow.userAttrs.y),  'x': (0 - vml_parent.pos_ieCSS3.x + shadow.userAttrs.x) }; shadow.size_offset = {  'width': 0,  'height': 0 }; shadow.style.color = shadow.userAttrs.color; shadow.style.position = 'absolute'; shadow.style.top = (element.pos_ieCSS3.y + shadow.position_offset.y) +'px'; shadow.style.left = (element.pos_ieCSS3.x + shadow.position_offset.x) +'px'; shadow.style.antialias = true; shadow.style.behavior = null; shadow.className = 'ieCSS3_text_shadow'; shadow.innerHTML = element.innerHTML; // For some reason it only looks right with opacity at 75% shadow.style.filter = '\  progid:DXImageTransform.Microsoft.Alpha(Opacity=75)\  progid:DXImageTransform.Microsoft.Blur(pixelRadius='+ shadow.userAttrs.radius +',makeShadow=false,shadowOpacity=100)\ '; var clone = element.cloneNode(true); clone.position_offset = {  'y': (0 - vml_parent.pos_ieCSS3.y),  'x': (0 - vml_parent.pos_ieCSS3.x) }; clone.size_offset = {  'width': 0,  'height': 0 }; clone.style.behavior = null; clone.style.position = 'absolute'; clone.style.top = (element.pos_ieCSS3.y + clone.position_offset.y) +'px'; clone.style.left = (element.pos_ieCSS3.x + clone.position_offset.x) +'px'; clone.className = 'ieCSS3_text_shadow'; element.parentNode.appendChild(shadow); element.parentNode.appendChild(clone); element.style.visibility = 'hidden'; // For window resizing element.vml.push(clone); element.vml.push(shadow); return(true);}function ondocumentready(classID) { if (!supportsVml()) { return(false); } if (this.className.match(classID)) { return(false); } this.className = this.className.concat(' ', classID); // Add a namespace for VML (IE8 requires it) if (!document.namespaces.v) { document.namespaces.add("v", "urn:schemas-microsoft-com:vml"); } // Check to see if we've run once before on this page if (typeof(window.ieCSS3) == 'undefined') {  // Create global ieCSS3 object  window.ieCSS3 = {   'vmlified_elements': new Array(),   'update_timer': setInterval(updatePositionAndSize, timer_length)  };  if (typeof(window.onresize) == 'function') { window.ieCSS3.previous_onresize = window.onresize; }  // Attach window resize event  window.onresize = updatePositionAndSize; } // These attrs are for the script and have no meaning to the browser: this.borderRadius = parseInt(this.currentStyle['iecss3-border-radius'] ||         this.currentStyle['-moz-border-radius'] ||         this.currentStyle['-webkit-border-radius'] ||         this.currentStyle['border-radius'] ||         this.currentStyle['-khtml-border-radius']); this.arcSize = Math.min(this.borderRadius / Math.min(this.offsetWidth, this.offsetHeight), 1); this.fillColor = this.currentStyle.backgroundColor; this.fillSrc = this.currentStyle.backgroundImage.replace(/^url\("(.+)"\)$/, '$1'); this.strokeColor = this.currentStyle.borderColor; this.strokeWeight = parseInt(this.currentStyle.borderWidth); this.stroked = 'true'; if (isNaN(this.strokeWeight) || (this.strokeWeight == 0)) {  this.strokeWeight = 0;  this.strokeColor = fillColor;  this.stroked = 'false'; } this.opacity = parseFloat(this.currentStyle.opacity || 1); this.textShadow = this.currentStyle['text-shadow']; this.element.vml = new Array(); this.zIndex = parseInt(this.currentStyle.zIndex); if (isNaN(this.zIndex)) { this.zIndex = 0; } // Find which element provides position:relative for the target element (default to BODY) vml_parent = this; var limit = 100, i = 0; do {  vml_parent = vml_parent.parentElement;  i++;  if (i >= limit) { return(false); } } while ((typeof(vml_parent) != 'undefined') && (vml_parent.currentStyle.position != 'relative') && (vml_parent.tagName != 'BODY')); vml_parent.pos_ieCSS3 = findPos(vml_parent); this.pos_ieCSS3 = findPos(this); var rv1 = createBoxShadow(this, vml_parent); var rv2 = createBorderRect(this, vml_parent); var rv3 = createTextShadow(this, vml_parent); if (rv1 || rv2 || rv3) { window.ieCSS3.vmlified_elements.push(this.element); } if (typeof(vml_parent.document.ieCSS3_stylesheet) == 'undefined') {  vml_parent.document.ieCSS3_stylesheet = vml_parent.document.createStyleSheet();  vml_parent.document.ieCSS3_stylesheet.addRule("v\\:roundrect", "behavior: url(#default#VML)");  vml_parent.document.ieCSS3_stylesheet.addRule("v\\:fill", "behavior: url(#default#VML)");  // Compatibility with IE7.js  vml_parent.document.ieCSS3_stylesheet.ie7 = true; }}function updatePositionAndSize() { if (typeof(window.ieCSS3.vmlified_elements) != 'object') { return(false); } for (var i in window.ieCSS3.vmlified_elements) {  var el = window.ieCSS3.vmlified_elements[i];  if (typeof(el.vml) != 'object') { continue; }  for (var z in el.vml) {   //var parent_pos = findPos(el.vml[z].parentNode);   var new_pos = findPos(el);   new_pos.x = (new_pos.x + el.vml[z].position_offset.x) + 'px';   new_pos.y = (new_pos.y + el.vml[z].position_offset.y) + 'px';   if (el.vml[z].style.left != new_pos.x) { el.vml[z].style.left = new_pos.x; }   if (el.vml[z].style.top != new_pos.y) { el.vml[z].style.top = new_pos.y; }   var new_size = {    'width': parseInt(el.offsetWidth + el.vml[z].size_offset.width),    'height': parseInt(el.offsetHeight + el.vml[z].size_offset.height)   }   if (el.vml[z].offsetWidth != new_size.width) { el.vml[z].style.width = new_size.width +'px'; }   if (el.vml[z].offsetHeight != new_size.height) { el.vml[z].style.height = new_size.height +'px'; }  } } if (event && (event.type == 'resize') && typeof(window.ieCSS3.previous_onresize) == 'function') { window.ieCSS3.previous_onresize(); }}</script>

2.调用ie-css3.htc脚本

.box{ border:1px solid #ccc; -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; /* Safari 和 Chrome */ border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */ width:150px;height:150px; behavior:url(ie-css3.htc);}

问题三：min-width/min-height/max-width/max-height

解决方案：

.box{ border:1px solid #ccc; max-width:100px;     　 _width:expression((document.documentElement.clientWidth||document.body.clientWidth)<100?"100px":"");
　　overflow:hidden;}

*注：_width:expression((document.documentElement.clientWidth||document.body.clientWidth)<100?"100px":""); 中的三个数字必须相同

问题四：不同浏览器的标签默认的内边距和外边距不同

解决方案：

*{margin:0;padding:0}

问题五：float情况下在ie6中margin会加倍

解决方案：

.box{ float:left; margin:5px; display:inline;}

问题六：ie下<img />标签的图片下有间隙（原因在于，图片是行内替换元素）

解决方案：

1.设置display:block

2.vertical-align:top/bottom/middle/text-bottom

ie 常用 hack:

1.注释法：

<!--[if IE]>这段文字只在IE浏览器显示<![endif]-->

2.属性前缀法

在标准模式中：

• “-″减号是IE6专有的hack
• “+”加号IE6/7生效
• “\9″ IE6/IE7/IE8/IE9/IE10都生效
• “\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
• “\9\0″ 只对IE9/IE10生效，是IE9/10的hack
• :root #test { background-color:purple\9; } /*ie9*/

.box{ background-color:#f1ee18;/*所有识别*/ background-color:#00deff\9;/*IE6、7、8、9、10识别，但是IE11不支持*/ background-color:#00deff\0;/*IE8、9、10、11识别,据说还有opera*/ background-color:#00deff\9\0;/*IE8、9、10识别*/ +background-color:#a200ff;/*IE6、7识别*/ *background-color:#a200ff;/*IE6、7识别*/ _background-color:#1e0bd1;/*IE6识别*/}

3.选择器前缀法：

*html *前缀只对IE6生效 *+html *+前缀只对IE7生效 @media screen\9{...}只对IE6/7生效 @media \0screen {body { background: red; }}只对IE8有效 @media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效 @media screen\0 {body { background: green; }} 只对IE8/9/10有效 @media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效

原标题：常见浏览器兼容性问题及解决方案

关键词：浏览器