浏览器兼容性

2020-04-16 11:08:48   0  举报





AI智能生成

前端常见浏览器兼容性

前端

浏览器兼容

模版推荐

作者其他创作

大纲/内容

html

H5新标签在IE9以下的浏览器识别

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.

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.

图片默认间距

问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距， 加上通配符也不起作用。 碰到几率：20% 解决方案：使用float属性为img布局 备注：因img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里， 但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是王道。

透明

IE8：filter：alpha（opacity=value）；（取值范围1--100） 其他：opacity：value；（取值范围0--1）

事件

标准的事件绑定方法函数为 addEventListener，但 IE8 以下是attachEvent；

event.x & event.pageX

说明

IE8 以下, event对象有x,y属性,但是没有pageX,pageY属性; Firefox下, event对象有pageX,pageY属性,但是没有x,y属性.

解决

mX = event.x ? event.x : event.pageX;

ajax的实现方式

一般浏览器是 XMLHttpRequest，IE5* 是activeXObject (IE5* 可以不考虑了，不过这点用来应付面试可以表示下是了解过的？)

detect features rather than browser