浏览器兼容性
2020-04-16 11:08:48 0 举报
AI智能生成
前端常见浏览器兼容性
作者其他创作
大纲/内容
html
H5新标签在IE9以下的浏览器识别
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5shiv.js"></script>
<![endif]-->
html5shiv.js下载地址
https://github.com/aFarkas/html5shiv/releases
<script type="text/javascript" src="js/html5shiv.js"></script>
<![endif]-->
html5shiv.js下载地址
https://github.com/aFarkas/html5shiv/releases
css
CSS reset
Every browser comes with a different set of internal, basic CSS styles.
Every browser will render a page differently even if it lacks any CSS styling of there own.
Every browser will render a page differently even if it lacks any CSS styling of there own.
To avoid having any side effects you can use a so called CSS reset style sheet in your page
to make sure that every browsers starts rendering with the same basic set of rules.
A few commonly used reset style sheets are:
Normalize.css
HTML5Reset
Eric Meyers CSS Reset
Make sure to have one of these added as the first style sheet to your page to ensure a proper CSS reset.
Of course many popular front-end frameworks like Twitter Bootstrapped already include a CSS reset
so there is no need to add a second one.
to make sure that every browsers starts rendering with the same basic set of rules.
A few commonly used reset style sheets are:
Normalize.css
HTML5Reset
Eric Meyers CSS Reset
Make sure to have one of these added as the first style sheet to your page to ensure a proper CSS reset.
Of course many popular front-end frameworks like Twitter Bootstrapped already include a CSS reset
so there is no need to add a second one.
图片默认间距
问题症状:几个img标签放在一起的时候,有些浏览器会有默认的间距,
加上通配符也不起作用。
碰到几率:20%
解决方案:使用float属性为img布局
备注:因img标签是行内属性标签,所以只要不超出容器宽度,img标签都会排在一行里,
但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是王道 。
加上通配符也不起作用。
碰到几率:20%
解决方案:使用float属性为img布局
备注:因img标签是行内属性标签,所以只要不超出容器宽度,img标签都会排在一行里,
但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是王道 。
透明
IE8:filter:alpha(opacity=value);(取值范围1--100)
其他:opacity:value;(取值范围0--1)
其他:opacity:value;(取值范围0--1)
js
事件
标准的事件绑定方法函数为 addEventListener,但 IE8 以下是attachEvent;
event.x & event.pageX
说明
IE8 以下, event对象有x,y属性,但是没有pageX,pageY属性;
Firefox下, event对象有pageX,pageY属性,但是没有x,y属性.
Firefox下, event对象有pageX,pageY属性,但是没有x,y属性.
解决
mX = event.x ? event.x : event.pageX;
ajax的实现方式
一般浏览器是 XMLHttpRequest,IE5* 是activeXObject
(IE5* 可以不考虑了,不过这点用来应付面试可以表示下是了解过的?)
(IE5* 可以不考虑了,不过这点用来应付面试可以表示下是了解过的?)
detect features rather than browser
参考链接
https://blog.csdn.net/lxcao/article/details/52975459
https://blog.csdn.net/weixin_30664615/article/details/96093630
https://blog.csdn.net/xustart7720/article/details/73604651
https://www.browseemall.com/Blog/index.php/2014/04/24/5-most-common-browser-compatibility-issues/
0 条评论
下一页