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

Posted 2021-01-21 suihang

1.图片间隙

　　A)div中的图片间隙（该bug出现在IE6以及更低版本当中）

　　描述：在div中插入图片时，图片会将div下方撑大三像素

　　hack1：将</div>和<img>写在一行上

　　hack2：将<img>转化为块状元素，给<img>添加声明：display:block;

　　B)dt,li中的图片间隙(IE6)

　　hack1:将<img>转化为块状元素，给<img>添加声明:display:block;

　　hack2:<img>设置对齐方式为vertical-align:top

2.双倍浮向（双倍边距）

　　描述:当ie6及更低版本解决浮动元素时，会错误的把浮向边边界加倍显示

　　hack：给浮动元素添加声明： display:inline

3.默认高度（IE6）

　　描述：在IE6及以下版本中，部分块元素拥有默认高度（低于16px高度）

　　hack1：给元素添加声明：font-size:0

　　hack2:给元素添加声明:overflow:hidden;

 

4.表单元素行高不一致

　　描述：表单元素行高对齐方式不一致

　　hack：给表单元素添加声明：float：left或vertical-align:top

5.百分比bug

　　描述：在IE6及以下版本中在解析百分比时，会按照四舍五入的方式计算从而导致50%加50%大于100%的情况

　　hack：给右边的元浮动元素添加1声明：clear：right；意思：清除右浮动，clear：left；clear：both

6.透明写法

　　opacity：0~1； IE8及以上浏览器

　　fliter:alpha(opacity=1~100);IE9及IE9以下的浏览器

7.列表阶梯bug（IE6及更低版本的浏览器当中）

　　bug1:在给的子元素中使用了Float：left；父元素没有设置浮动属性，li阶梯效果

　　hack：给父元素设置浮动

　　bug2：当给LI里的A转成块元素，并设置了固定高度，且给父元素写了浮动后在IE6及更低版本中会出现垂直显示

·　  hack：给a也设置浮动便可解决

8.鼠标指针bug

　　描述：cursor属性的head属性值只有IE浏览器能识别，其他浏览器不识别该声明，cursor属性的pointor属性值IE6.0以上版本及其他内核

　　　　　　浏览器都识别该声明

　　hack：如同意某元素指针鼠标形状为手型，添加声明：cursor：pointer

9.浏览器解析边框按钮时，会把边框解析在按钮内部，不会影响按钮的原有大小

10.Normalize.css

　　不同浏览器的默认样式存在差距，可以使用Normalize.css抹平这些差异，当然你也肯定定制属于自己业务的reset.css

　　<link href ="https://cdn.bootcss.com/noemalize/7.0.0/normalize.min.css" rel="stylesheet">

　　简单粗暴法:*{margin:0;padding:0}

11.html5shiv.js

　　解决ie9及以下浏览器对html5新增标签不能识别的问题

12.浏览器兼容前缀

　　Opera:-o-

　　IE:-ms

　　Firedox:-moz-

　　Chrome:-webkit-

13.a标签的几种CSS状态的顺序

　　有时候我们写好a标签会发现写的样式无效，或者点击超链接后，hover，active样式没有效果，其实知识写的样式被覆盖了

　　正确的a标签顺序应该是 ：==love  hate   ==  爱恨

　　即.link　.visited    .hover      .active

14.BFC解决边距重叠问题

　　.当相邻元素设置了margin边距时。margin将会取最大值，舍弃小值，为了不让边距重叠，可以给子元素加一个父元素，并设置该父元素为BFC：overflow：hidden（注意：BFC为块状格式化上下文）

15.IE6双倍边距问题

　　ie6中设置浮动，同时有设置margin，会出现双倍边距的问题

　　hack：display：inline

16.解决IE6不支持fixed绝对定位以及IE6以下被绝对定位的元素在滚动时会闪动的问题

　　hack：html,html body{

　　　　background-images:url(about:blank);

　　　　background-attachment:fixed;}

　　　　html #menu{

　　　　position:absolute;

　　　　top:expression((e=document.doucumentElement.scrollTop)?e.document.body.scrollTop)+100+‘px‘)}

17.解决IE6不支持min-height兼容性写法

　　min-height:350px;

　　_height:350px;

 

今天早上突发奇想看了看浏览器的兼容问题，发现我竟然全忘光了，血惨，赶紧整篇博客记一下子，感觉提前步入老年痴呆生活了