常见浏览器兼容性问题
前言
不同浏览器的内核不尽相同,所以各个浏览器对网页的解析存在一定的差异。
浏览器内核主要分为两种,一是渲染引擎,另一个是js 引擎
所以浏览器兼容性问题一般指:css兼容、js兼容
一、css兼容
1. 不同浏览器的标签默认的margin和padding不同
问题症状: 随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。
解决方案:
- CSS里
*{margin:0;padding:0;}
但是性能不好 - 一般我们会引入reset.css样式重置;
html,body,div,span,applet,object,,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {margin:0;padding:0;border:0;font-size:100%;font:inherit;font-weight:normal;vertical-align:baseline;
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;
}
ol,ul,li {list-style:none;
}
blockquote,q {quotes:none;
}
blockquote:before,blockquote:after,q:before,q:after {content:'';content:none;
}
table {border-collapse:collapse;border-spacing:0;
}
th,td {vertical-align:middle;
}
/* custom */
a {outline:none;color:#16418a;text-decoration:none;-webkit-backface-visibility:hidden;
}
a:focus {outline:none;
}
input:focus,select:focus,textarea:focus {outline:-webkit-focus-ring-color auto 0;
}
2. css3新属性,加浏览器前缀兼容早期浏览器
-moz- /* 火狐浏览器 /
-webkit- / Safari, 谷歌浏览器等使用Webkit引擎的浏览器 /
-o- / Opera浏览器(早期) /
-ms- / IE */
哪些css3属性需要加:
定义关键帧动画 @keyframes
css3中的变形(transform)、过渡(transtion)、动画(animation)
border-radius 圆角
box-shadow 盒子阴影
flex 弹性布局
....
3. 块属性标签float后,又有横行的margin情况下,IE 浏览器margin加倍的问题
问题症状: 常见症状是IE6中后面的一块被顶到下一行
解决方案: 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;
4. 设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置高度
问题症状: 设置div高度小于10px,IE6、7和遨游里div的高度,超出自己设置的10px.
解决方案:
给超出高度的标签设置overflow:hidden;
或者设置行高line-height 小于你设置的高度。
5. 行内属性标签,设置display:block后采用float布局,又有横行的margin的情况,IE6间距bug
问题症状: IE6里的间距比超过设置的间距
解决方案: 在display:block;后面加入display:inline;display:table;
6. IE浏览器div最小宽度和高度的问题
问题症状: IE浏览器div最小宽度和高度不生效
7. 超链接访问过后hover样式就不出现的问题
被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序: L-V-H-A
8. 图片默认有间距
问题症状: 几个img标签放在一起的时候,有些浏览器会有默认的间距,通配符清除间距也不起作用。
解决方案: 使用float属性为img布局(所有图片左浮)
9. css hack解决浏览器兼容性
不同浏览器,识别不同的样式,csshack本身就是处理浏览器兼容的。
下面是css hack写法:
background-color:yellow0; 0 是留给ie8的
+background-color:pink; + ie7定了;
_background-color:orange; _专门留给神奇的ie6;
二、js兼容
1. 事件绑定
2. event事件对象问题
event.srcElement(事件源对象)问题
3. 获取元素的非行间样式值:
4. 阻止事件冒泡传播:
5. 阻止事件默认行为:
6. ajax兼容问题
常见浏览器兼容性问题相关推荐
- 我所碰到的面试题之------前端常见浏览器兼容性问题解决方案---
我所碰到的面试题之------前端常见浏览器兼容性问题解决方案--- 参考文章: (1)我所碰到的面试题之------前端常见浏览器兼容性问题解决方案--- (2)https://www.cnblog ...
- 常见浏览器兼容性问题及解决方案
常见浏览器兼容性问题及解决方案: 1.不同浏览器的默认内外边距和内外补丁不同. 解决方案:css设置 *{margin:0; padding:0;} *是通配符,匹配所有html标签. 2.块级元素f ...
- 常见浏览器兼容性问题大全
常见浏览器兼容性问题与解决方案 所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或 ...
- 【转】常见浏览器兼容性问题与解决方案css篇
小满语:说到兼容性问题,不得不说一下IE浏览器,尤其是IE9以前,兼容性差的要哭,来,擦擦眼泪,学习一下兼容性问题的解决方案~本篇主要是布局后加样式后导致浏览器显示不统一的情形: 所谓的浏览器兼容性问 ...
- 常见浏览器兼容性问题与解决方案
2019独角兽企业重金招聘Python工程师标准>>> 所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求 ...
- 常见浏览器兼容性问题与解决方式
所谓的浏览器兼容性问题,是指由于不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,不管用户用什么浏览器来查看我们的站点或者登陆我们的系统,都应该是统一的 ...
- 常见浏览器兼容性问题与解决方案?
(1)浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大. 碰到频率:100% 解决方案:CSS ...
- 常见浏览器兼容性问题和解决方案
持续更新~ 常见的浏览器IE.Firefox.Chrome等主流浏览器兼容性问题和解决方案: 1,各浏览器默认的margin/padding值不同 解决方案:共通css里头部加上 * {margin: ...
- 前端常见浏览器兼容性问题
引言: 不同浏览器的内核不尽相同,所以各个浏览器对网页的解析存在一定的差异. 浏览器内核主要分为两种,一是渲染引擎,另一个是js 引擎 所以浏览器兼容性问题一般指:css兼容.js兼容 兼容css 1 ...
- 常见浏览器兼容性bug
1.IE6有图片向左浮动且有向左外边距或文字向右浮动且有向右外边距是会出现双倍外边距的bug 在 IE5.0 IE5.5 IE6 中,当为一个块级元素同时设置了向左浮动(float:left)及左边距 ...
最新文章
- 开发人员绩效考核中有效bug数的统计
- AI的阿基里斯之踵:模糊性
- Partition函数
- 北京大学启用人脸识别系统:学生“刷脸”入校
- 【连载】如何掌握openGauss数据库核心技术?秘诀四:拿捏事务机制(2)
- 相互宝正式宣布将于2022年1月28日关停
- Windows Server 2016如何配置定期执行任务计划
- 如何使用 SQL Server FILESTREAM 存储非结构化数据?
- 设计模式(十八):责任链模式
- asp程序ajax怎么写,ASP+AJAX+ACCESS数据库实例讲解三个步骤分享
- 人工智能 (特征数据提取)
- 操作系统实验二、进程通信实验——f(x,y) = f(x) + f(y)
- 脑电EEG代码开源分享 【5.特征选择】
- 服务器虚拟化cas,CAS虚拟化建设方案
- 计算机应用技术ps考证,2017计算机等级考试一级Photoshop应用试题及答案
- 蚂蚁金服褚霸:敲最牛的代码,骑最野的车
- python:IndentationError:expected an indented block
- nginx 解析二级域名
- 打车日记 - 上班迟到
- mysql数据库递归访问数据