浏览器兼容性问题又被称为网页或网站兼容性问题;不同浏览器内核及所支持的html等网页语言标准不同,不同客户端环境(如分辨率不同)造成实际显示效果未能达到预期理想效果
position:relative;
网页上最直接表现就是极具破坏性的滚动错位,问题产生来自ie7自身渲染解析出错;这个问题的解决方案没有具体的代码,尽量避免在过多层级中使用该属性,绝对禁止为无需要无作用元素添加该属性,如tr、td等
容器内纯英文文本过长且无空格等符号时不能自动换行
浏览器环境:多浏览器
abcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabc
属于极端操作行为,问题来自各浏览器本身,添加2个word属性即可
word-break:break-all;word-wrap:break-word;
或者不换行,超出部分显示为更多
overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
这2个办法各有优劣,使用时都需根据网页上具体情况而定
元素有margin上边距值且处于最前或下边距值且处于最后,外部容器高度不能自适应
浏览器环境:多浏览器
margin:20px 0 0;
外容器并没有按理想状况自适应撑开,从内间隙变成了外间隙,突出表现在外容器有背景色等特征可被明显观察时;根据情况更换元素或外容器的margin为padding
padding:20px 0 0;
老生常谈的清浮动
浏览器环境:多浏览器
问题没什么要描述的直接上解决代码
.clearfix:after{height:0;display:block;content:".";visibility:hidden;clear:both;}.clearfix{zoom:1;}.clear{height:0;overflow:hidden;font-size:0;clear:both;}
如使用清浮动样式的元素处于页面最底部,会给页面底部带来一小段空隙,发生该情况时需及时调整注意避免
悬挂元素工作时表现失常,页面滚动时有明显的停顿抖动
浏览器环境:多浏览器
position:fixed;
原本该吸附在页面上的元素并没有令人满意的工作,原因是网页带给浏览器的性能消耗过大如网页上有动画等;从苹果官网偷来的办法是添加一个叫做“隐藏被旋转元素背面”属性,观察结果很有效
position:fixed;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden;
图片等元素不能自适应垂直居中
浏览器环境:多浏览器
无需多描述直接上代码,p与img宽高均可任意改动
p{width:800px;height:800px;display:table-cell;text-align:center;vertical-align:middle;}p img{position:static;+position:relative;top:-50%;left:-50%;vertical-align:middle;}p i{position:static;+position:absolute;top:50%;}
一个网站尤其是大型门户网站的兼容性调试是一项很浩大的工程,耗时耗力耗青春,并且还不一定讨好,从事过大项目开发中兼容性调试的同行一定有着和他人不一样的体会,个中滋味实在难以明言
很多人以为自己懂兼容性,觉得不过如此,随手可以做出一个全浏览器兼容的网页
但是一个在兼容性问题上沉浸多年并在大型门户级网站开发中支持很久的人在兼容性水平的表现上是完全不一样的,兼容性出色的工程师可以通过部署好自己的代码,从很多源头上避免产生兼容性问题的可能性
现在的国内市场上,能出色完成ie6/7兼容性工作的人越来越少,原因有很多:很多新加入前端开发的同行,直接依托某web前端开发框架,并且在框架本身的兼容性条件下选择回避ie6/7的兼容性工作;而老一辈前端工程师随着个人发展到一定阶段后,有着其它更重要的职能与个人更感兴趣的内容,也不会乐意继续从事该项没有未来的工作;最后一个重中之重的现实问题,长期支持ie6/7对于前端工程师的个人成长来说的确是一个很不利的因素,毕竟它正处于淘汰进行时,市场占有量越来越少并且很多引领互联网行业的媒体也开始接受忽略来自ie6用户的态度
查看更多关于web前端开发的浏览器兼容性(持续更新)_html/css_WEB-ITnose的详细内容...