一、CSS

1、浏览器的兼容性问题-CSS 盒子模型(Box Model)

一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

IE8 及更早IE版本不支持设置填充的宽度和边框的宽度属性。

解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。

box-sizing 用来告诉浏览器该使用哪种盒模型来渲染文档。

content-box 是默认的盒子模型，即 W3C 标准盒子模型，现如今所有主流浏览器都支持并使用该模型渲染布局，包括 IE。但麻烦却是一堆堆的，因为，在这模型下，border与padding的设置会破坏元素的尺寸，导致最终展现出来的布局效果并不符合理想效果，而如果想要达到理想效果，又需要去计算宽高，非常麻烦。

（别的属性是越标准越好用，但这个属性却是反向向IE标准的）

而 border-box 则指 IE盒子模型，也称为“怪异盒子模型”。此模型下，边框和填充并不会影响元素的宽高，相当于是将元素的空间霸占成自己的空间，元素总体大小不变，内容空间变小，边框、填充则霸占着原本属于内容空间的地方。这在平时设计布局时，就非常的舒服，因为在指定元素尺寸并设置该属性值后，元素尺寸就不会因被破坏而又得重新计算了。

2、浏览器的兼容性问题-左右对齐使用 position: absolute方式或者 float 方式

当使用 position 来对齐元素时, 通常 <body> 元素会设置 margin 和 padding 。这样可以避免在不同的浏览器中出现可见的差异。当使用 position 属性时，IE8 以及更早的版本存在一个问题。如果容器元素（在我们的案例中是 <div class="container">）设置了指定的宽度，并且省略了 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 position 属性时，请始终设置 !DOCTYPE 声明。

当使用浮动属性（float）对齐,总是包括 !DOCTYPE 声明!如果丢失,它将会在 IE 浏览器产生奇怪的结果。

3、浏览器的兼容性问题-列表样式（ul li）

IE和Opera显示图像标记比火狐，Chrome和Safari更高一点点。

如果你想在所有的浏览器放置同样的形象标志，就应使用浏览器兼容性解决方案，过程如下

ul
{list-style-type: none;padding: 0px;margin: 0px;
}

4、浏览器的兼容性问题-opacity（透明度）

IE9，Firefox，Chrome，Opera，和Safari浏览器使用透明度属性可以将图像变的不透明。 Opacity属性值从0.0 - 1.0。值越小，使得元素更加透明。

IE8和早期版本使用滤镜：alpha（opacity= x）。 x可以采取的值是从0 - 100。较低的值，使得元素更加透明。

{opacity:0.4;filter:alpha(opacity=40); /* IE8 及其更早版本 */
}

5、浏览器的兼容性问题-CSS3

Internet Explorer 10, Firefox, 和 Opera支持transform 属性.

Chrome 和 Safari 要求前缀 -webkit- 版本.

注意： Internet Explorer 9 要求前缀 -ms- 版本

-transform（转换）

{transform:rotate(30deg);-ms-transform:rotate(30deg); /* IE 9 */-webkit-transform:rotate(30deg); /* Safari and Chrome */
}

-transition（过渡）

div {width: 100px;height: 100px;background: red;-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */transition: width 2s, height 2s, transform 2s;
}div:hover {width: 200px;height: 200px;-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */transform: rotate(180deg);
}

-animation（动画）

{width:100px;height:100px;background:red;animation:myfirst 5s;-webkit-animation:myfirst 5s; /* Safari and Chrome */
}@keyframes myfirst
{from {background:red;}to {background:yellow;}
}@-webkit-keyframes myfirst /* Safari and Chrome */
{from {background:red;}to {background:yellow;}
}

-Gradients（渐变）

{height: 200px;background-color: red; /* 不支持线性的时候显示 */background-image: linear-gradient(to bottom right, red , yellow);
}

-字体文件格式

Internet Explorer 9 只支持 .eot 格式的字体.

@font-face
{font-family: myFirstFont;src: url('Sansation_Light.ttf'),url('Sansation_Light.eot'); /* IE9 */
}

CSS3 多列属性

div {/*多列*/-webkit-column-count: 3; /* Chrome, Safari, Opera */-moz-column-count: 3; /* Firefox */column-count: 3;/*列宽度*/-webkit-column-width: 100px; /* Chrome, Safari, Opera */column-width: 100px;/*列间隙*/-webkit-column-gap: 40px; /* Chrome, Safari, Opera */-moz-column-gap: 40px; /* Firefox */column-gap: 40px;/*列间隙边框*/-webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */-moz-column-rule: 1px solid lightblue; /* Firefox */column-rule: 1px solid lightblue;
} h2 {/*标题跨越多少列*/-webkit-column-span: all; /* Chrome, Safari, Opera */column-span: all;
}

CSS3 用户界面（resize、box-sizing、outline-offset）

Internet Explorer和opera 不兼容 resize属性

Internet Explorer 也不兼容 outline-offset属性

css3 flex box（弹性盒子）

.flex-container{display: -webkit-flex;display: flex;-webkit-flex-direction: row-reverse;flex-direction: row-reverse;-webkit-justify-content: flex-end;justify-content: flex-end;-webkit-align-items: stretch;align-items: stretch;-webkit-flex-wrap: nowrap;flex-wrap: nowrap;
}

6、浏览器的兼容性问题-HTML5

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

IE9 以下版本浏览器兼容HTML5的方法，使用本站的静态资源的html5shiv包：

<!--[if lt IE 9]><script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

载入后，初始化新标签的CSS：


/*html5*/
article,aside,dialog,footer,header,section,nav,figure,menu{display:block}

二、JavaScript

1、浏览器的兼容性问题-addEventListener()

IE 8 及更早 IE 版本，Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是，对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:

element.attachEvent(event, function);
element.detachEvent(event, function);

实例

跨浏览器解决方法:

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // 所有主流浏览器，除了 IE 8 及更早版本x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // IE 8 及更早版本x.attachEvent("onclick", myFunction);
}

2、浏览器的兼容性问题-Window 尺寸

有三种方法能够确定浏览器窗口的尺寸。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)

对于 Internet Explorer 8、7、6、5：

document.documentElement.clientHeight
document.documentElement.clientWidth

或者

document.body.clientHeight
document.body.clientWidth

实用的 JavaScript 方案（涵盖所有浏览器）：

var w=window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth;var h=window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;

3、设备的兼容性问题-Javascript 判断是移动端浏览器还是 PC 端浏览器

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {document.write("移动")
} else {document.write("PC")
}

4、设备的兼容性问题-JavaScript 判断是否微信浏览器

function is_weixn(){  var ua = navigator.userAgent.toLowerCase();  if(ua.match(/MicroMessenger/i)=="micromessenger") {  return true;  } else {  return false;  }  
}  if( is_weixn() ) {document.write("微信浏览器")
} else {document.write("其他浏览器")
}