前端面试必备的所掌握的兼容问题 |
您所在的位置:网站首页 › i73990k和1333兼容性问题 › 前端面试必备的所掌握的兼容问题 |
一、首先你要知道的是兼容是哪些问题
前端兼容性问题分三类: 浏览器兼容问题IE6、7、8不支持HTML5、CSS3、SVG标准,可被判定为“极难兼容” IE9不支持Flex、Web Socket、WebGL,可被判定为“较难兼容” IE10部分支持Flex(-ms-flexbox)、Web Socket,可被判定为“较易兼容” IE11部分支持Flex、WebGL,可被判定为“较易兼容” IE6、7、8、9可视为“老式浏览器” IE10、11可视为“准现代浏览器” Chrome、Firefox、Safari、Opera 、Edge可视为“现代浏览器”屏幕分辩兼容问题在不同的屏幕分辨率,浏览器页面展示差异很大。特别是屏幕分辨率较小时,容易发生布局错乱。为了解决这个问题,响应式UI框架应运而生跨平台兼容问题随着移动和平板市场的日益发展,Web在桌面、平板、移动平台上的兼容性问题日益突出。由于移动和平板是触摸式操作,与桌面的鼠标操作方式有很大差异,因此在不同平台上要做相应修改。为了解决这个问题,诞生了跨平台框架,在不同平台上,外观、布局、操作都有差异化修改 二、常备兼容性问题1、不同浏览器的标签默认的外边距和内边距不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。 解决方案:css里 {margin:0;padding:0;} 注释:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的css文件开头都会用通配符来设置各个标签的内外边距是0。 2、图片默认有间距 问题症状:几个img标签放在一起的时候,有些浏览器会有默认的间距,加上问题一中提到的通配符也不起作用。 解决方案:使用float属性为img布局 备注:因为img标签是行内属性标签,所以只要不超出容器宽度,img标签都会排在一行里,但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道 3、使用after伪元素清除法(也称之为万能清楚法) .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }4、超出显示省略号 select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; width:200px; }5、链接访问过后hover样式就不出现的问题 a:link {} a:visited {} a:hover {} a:active {} 欢迎大家进群进行技术性的探讨, 群号:954314851 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |