前端兼容性问题

css hack:

　CSS hack由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。

  简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。

　css实例

.color{
    background-color: #CC00FF;        /*所有浏览器都会显示为紫色*/
    background-color: #FF0000\9;    /*IE6、IE7、IE8会显示红色*/
    *background-color: #0066FF;        /*IE6、IE7会变为蓝色*/            
    _background-color: #009933;        /*IE6会变为绿色*/
}
background: red;       /* 对FF Opera和Safari有效 */
#background: blue;      /* 对 IE6 和 IE7有效 */
_background: green;      /* 只对IE6有效 */
/*/background: orange;*/      /** 只对IE8有效 **/
!important         /*FF、IE7有效*/
*         /*IE都有效*/

 

flex（微信兼容性）：

在外层加上：flex-direction: column;display: flex;

 

html头部标签：

若页面需默认用极速核，增加标签：<meta name="renderer" content="webkit"> （兼容360浏览器（兼容模式）：）

<meta http-equiv="X-UA-Compatible" content="chrome=1">（让网页优先采用Chrome渲染）

 

ie6、ie7兼容性问题,常用有兼容性问题的属性(这些属性不仅在ie低版本兼容有问题，在火狐等浏览器也有，因此需要加前缀)

边框
border-radius
box-shadow
border-image
背景
background-size
颜色
opacity
RGBA
文本
word-wrap
文本装饰
text-shadow
伪类选择符
last-child
only-child
nth-child(n)
:empty
:checked
单位
rem
deg
伸缩盒flex(都不支持)
转换Transform(都不支持)
过渡 Transition(都不支持)
动画 Animation(都不支持)
媒体查询 Media Queries(都不支持)

 

ie6、ie7特殊情况：

1.height低像素值无效

案例：height:5px;    height高度实际表现为大于5像素，问题产生是因为ie6下容器默认行高的影响；为高度过低元素添加溢出部分隐藏属性即可  解决方案：height:5px;overflow:hidden;

2.margin值双倍边距

案例：margin:0 10px;float:left;      margin左右边距实际表现为20像素，问题一般发生于浮动元素，原因是ie6下浮动元素margin值默认变成双倍；为浮动元素添加行间元素属性即可，优化了同行元素的排版表现     解决方案：margin:0 10px;display:inline;float:left;

3.max-width、min-width、max-height、min-height等属性无效

最大最小宽高属性在网页需要它出现时并没有给面子，问题原因是ie6不支持；解决办法是使用expression来实时获取元素当前适合宽高

解决方案：

max-width:1280px;_width:expression(documentElement.clientWidth > 1280 ? "1280px" : "auto");
min-width:980px;_width:expression(documentElement.clientWidth < 980 ? "980px" : "auto");
min-height:800px;_height:expression((documentElement.clientHeight || document.body.clientHeight) > 800 ? "800px" : "");
min-height:600px;_height:expression((documentElement.clientHeight || document.body.clientHeight) < 600 ? "600px" : "");

4.fixed属性值无效

案例：position:fixed;top:100px;left:10px;

预想中的悬挂效果并没有出现，原因很简单ie6根本不支持；我们的解决办法是改变元素的悬挂为定位并使用expression来实时处理元素当前显示位置

解决方案：

position:fixed;_position:absolute;top:100px;_top:expression(documentElement.scrollTop + 100 + "px");left:10px; 

5.定位元素上下或左右属性同时赋值时无效

案例：position:absolute;top:0;bottom:0;left:0;right:0;

画布实际表现为并没有按预想的全屏伸展开，问题产生原因是ie6下上下或左右定位属性同时存在时只识别上与左；为元素赋于宽高属性即可

解决方案：

width:100%;height:100%;position:absolute;top:0;left:0;

6.透明png格式图片的背景问题

网页上的糟糕表现为出现了灰背景，原因是ie6不支持png透明或png8及其以上的alpha透明度；网上的解决办法很多，javascript办法最多但都有通病，本身加载时间与之带来的网页负载，尤其是在网页本身负载就很大或网页上有过多需要处理的png图片的情况，会导致本来性能就不好的ie6浏览器明显停滞甚至崩溃，所以这里我们推荐的是css与图形处理两种纯天然处理方式，首先来看css滤镜处理

解决方案：

background:url(../images/logo.png) no-repeat 50%;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/logo.png");

7.width等百分比值计算时有误

如恰好有4个25%充满外部容器，外容器宽度不是恰到好处时实际宽度会溢出，第4个元素会换行，问题的产生是因为ie6/7网页计算自适应处理能力不足；较为稳妥的处理方案是为ie6/7少许减少宽度

解决方案：

width:25%;*width:24%;

8.元素有margin上边距值且处于最前或下边距值且处于最后，外部容器高度不能自适应

外容器没有按理想状况自适应撑开，从内间隙变成了外间隙，突出表现在外容器有背景色等特征可被明显观察时；根据情况更换元素或外容器的margin为padding

9.清除浮动

.clearfix:after { content: ''; display: block; height: 0; clear: both; }
.clearfix { zoom: 1; }
.clear { clear: both; }

10.悬挂元素工作时表现失常，页面滚动时有明显的停顿抖动

案例：position:fixed;

原本该吸附在页面上的元素并没有令人满意的工作，原因是网页带给浏览器的性能消耗过大如网页上有动画等；直接办法是添加一个叫做隐藏被旋转元素背面的属性

解决方案：

position:fixed;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden;

11.图片等元素不能自适应垂直居中

案例：<p><i><img src="" width="120" height="120" /></i></p>

解决方案：

p{width:800px;height:800px;display:table-cell;text-align:center;vertical-align:middle;}
p img{position:static;+position:relative;top:-50%;left:-50%;vertical-align:middle;}
p i{position:static;+position:absolute;top:50%;}