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

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;

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

    

原文地址:https://www.cnblogs.com/suihang/p/9986946.html

时间: 2024-08-12 01:28:57

浏览器兼容问题及解决方案的相关文章

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

对于前端开发良好的浏览器兼容必不可少,总结一下遇到浏览器兼容问题的解决办法. 1.保证浏览器默认css样式一致: 2.书写规范的css,然后在不同的浏览器下测试,针对不同的bug,用适当的方式解决.如:css Hack, 3.使用好的前端架构,通过第三方控件兼容浏览器: 4.多学习.多积累.多google.  一.保证浏览器默认css样式一致 首先要保证各个浏览器的默认样式的统一,所以这里就用到了css.reset.网络上有各种版本的reset代码,一般都是在一个项目的base.css里.我在这

对浏览器兼容问题的解决方案

目前,最为流行的浏览器共有五个:分别是ie,Edge浏览器(属于微软),火狐,谷歌(chrome)Safari和Opera五大浏览器. Trident内核:IE ,360,,猎豹,百度: Gecko内核:火狐----------->这个浏览器内核是开源的浏览器内核,插件非常多,-------------->缺点:打开速度慢(加载flash插件)<-----额外介绍----->. Presto内核:Opera7及以上版本 Webkit:遨游,苹果 ,symbian:Safari.Ch

常见浏览器的兼容问题以及解决方案 (仅供参考)

所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果.所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题. 在学习浏览器兼容性之前,我想把前端开发人员划分为两类: 第一类是精确按照设计图开发的前端开发人员,可以说是精确到1px的,他们很容易就会发现设计图的不足,并且在很少的情况下会碰到浏览器的兼容性问题,而这些问题往往都死浏览器

常见浏览器兼容性问题与解决方案【转】

常见浏览器兼容性问题与解决方案 原文:http://blog.csdn.net/chuyuqing/article/details/37561313/ 所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果.所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题. 在学习浏览器兼容性之前,我想把前端开发人员划分为两类: 第一类是精确按

浏览器兼容问题汇总(持续更新)

所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果.所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题. 在学习浏览器兼容性之前,我想把前端开发人员划分为两类: 第一类是精确按照设计图开发的前端开发人员,可以说是精确到1px的,他们很容易就会发现设计图的不足,并且在很少的情况下会碰到浏览器的兼容性问题,而这些问题往往都死浏览器

WEB前端开发人员须知的常见浏览器兼容问题及解决技巧

所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果.所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题.在学习浏览器兼容性之前,我想把前端开发人员划分为两类: 第一类是精确按照设计图开发的前端开发人员,可以说是精确到1px的,他们很容易就会发现设计图的不足,并且在很少的情况下会碰到浏览器的兼容性问题,而这些问题往往都是浏览器的

常见CSS浏览器兼容性问题与解决方案【转载自http://blog.csdn.net/chuyuqing/article/details/37561313/】

所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果.所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题. 在学习浏览器兼容性之前,我想把前端开发人员划分为两类: 第一类是精确按照设计图开发的前端开发人员,可以说是精确到1px的,他们很容易就会发现设计图的不足,并且在很少的情况下会碰到浏览器的兼容性问题,而这些问题往往都死浏览器

常见的浏览器兼容问题

所谓的浏览器兼容性问题,是指因为不同的浏览器对同 段代码有不同的解析,造成 显 效果不统 的情况.在 多 数情况下,我们的需求是, 论 户 什么浏览器来查看我们的 站或者登陆我们的系统,都应该是统 的显 效果.所 以浏览器的兼容性问题是前端开发 员经常会碰到和必须要解决的问题. 在学习浏览器兼容性之前,我想把前端开发 员划分为两类: 第一类是精确按照设计图开发的前端开发 员,可以说是精确到1px的,他们很容易就会发现设计图的不 ,并且在很少的情况下会碰到浏览器的兼容性问题, 这些问题往往都死浏览

处理常见浏览器兼容问题

浏览器兼容问题一:不同浏览器的标签默认的margin和padding不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大 碰到频率:100% 解决方案: CSS里加一行 *{margin:0;padding:0;} 备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0. 浏览器兼容问题二: 块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大 问