各种收集到的前端开发中出现的兼容性问题

1、html部分

a、最突出也是最容易想到的就是高版本的浏览器用了低版本的浏览器无法识别的元素,从而导致不能解析。这点主要体现在html5的新标签上

解决办法是:htmlshim框架可以让低于IE9的浏览器支持html5

b、img的alt属性,在图片不存在的情况下,各浏览器的解析不一致

在chrome下显示的是一张破损的图片,在ff下显示的是alt的文字,而在IE中显示的是破损的图片加文字

c、ul标签内外边距问题

ul标签在IE6\IE7中,有个默认的外边距,但是在IE8以上及其他浏览器中有个默认的内边距

2、css部分:

a、css的hack问题:主要针对IE的不同版本,不同的浏览器的写法不同

IE的条件注释hack:

<!--[if IE 6]>此处内容只有IE6.0可见<![endif]-->

<!--[if IE 7]>此处内容只有IE7.0可见<![endif]-->

b、IE6双边距问题:IE6在浮动后,又有横向的margin,此时,该元素的外边距是其值的2倍

解决办法:display:block;

c、IE6下图片的下方有空隙

解决方法:给img设置display:block;

d、IE6下两个float之间会有个3px的bug

解决办法:给右边的元素也设置float:left;

e、IE6下没有min-width的概念,其默认的width就是min-width

f、IE6下在使用margin:0 auto;无法使其居中

解决办法:为其父容器设置text-align:center;

g、 被点击过后的超链接不再具有hover和active属性

解决办法:按lvha的顺序书写css样式

h、在使用绝对定位或者相对定位后,IE中设置z-index失效,原因是因为其元素依赖于父元素的z-index,但是父元素默认为0, 子高父低,所以不会改变显示的顺序

i、IE6下无法设置1px的行高,原因是由其默认行高引起的

解决办法:为期设置overflow:hidden;或者line-height:1px;

3、js部分

a、标准的事件绑定方法函数为addEventListener,但IE下是attachEvent;

b、事件的捕获方式不一致,标准浏览器是由外至内,而IE是由内到外,但是最后的结果是将IE的标准定为标准

c、我们常说的事件处理时的event属性,在标准浏览器其是传入的,IE下由window.event获取的。并且获取目标元素的方法也不同,标准浏览器是event.target,而IE下是event.srcElement

d、在低版本的IE中获取的日期处理函数的值不是与1900的差值,但是在高版本的IE中和标准浏览器保持了一致,获取的值也是与1900的差值。
   
       比如:var year= new Date().getYear();

e、ajax的实现方式不同,这个我所理解的是获取XMLHttpRequest的不同,IE下是activeXObject

f、IE中不能操作tr的innerHtml

g、获得DOM节点的父节点、子节点的方式不同

其他浏览器:parentNode  parentNode.childNodes

IE:parentElement parentElement.children

时间: 2024-10-15 03:49:14

各种收集到的前端开发中出现的兼容性问题的相关文章

web前端开发中的浏览器兼容性总结

1.居中问题 div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto; 2.高度问题 两上下排列或嵌套的div,上面的div设置高度(height),如果div里的实际内容大于所设高度,在FF中会出现两个div重叠的现象:但在IE中,下面的div会自动给上面的div让出空间所以为避免出现层的重叠,高度一定要控制恰当,或者干脆不写高度,让他自动调节,比较好的方法是 height:100%;但当这个div里面一级的元素都float了的时候,则需要在div块的

一探前端开发中的JS调试技巧

前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今天,如何在前端开发中降低开发成本,提升工作效率,掌握前端开发调试技巧尤为重要. 本文将一一讲解各种前端JS调试技巧,也许你已经熟练掌握,那让我们一起来温习,也许有你没见过的方法,不妨一起来学习,也许你尚不知如何调试,赶紧趁此机会填补空白. 骨灰级调试大师Alert 那还是互联网刚刚起步的时代,网页前

关于前端开发中的“收口”思想

什么是收口 所谓条条大路通罗马,但如果让我来设计通向罗马的各种大路,我至少会做两件事情: ① 让罗马只有一个入口 ② 让罗马只有一个出口 这样做的好处是,无论你路从哪来,我可以统一在入口处给你打上各种标志,我也可以在你离开罗马时给你留点纪念.当然罗马自然不只一个出口入口,但是每个出口入口一定有一套相同的规定,否则就会出问题. 具体到当今的工作场景,高速公路又是一个收口的好例子,进入高速公路时候得经过收费站做点标志,离开时候也会做点操作,如果没有这种收口,不论是缴费工作,流量统计或者其他都是无法统

前端开发中的JS调试技巧

前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今天,如何在前端开发中降低开发成本,提升工作效率,掌握前端开发调试技巧尤为重要. 本文将一一讲解各种前端JS调试技巧,也许你已经熟练掌握,那让我们一起来温习,也许有你没见过的方法,不妨一起来学习,也许你尚不知如何调试,赶紧趁此机会填补空白. 骨灰级调试大师Alert 那还是互联网刚刚起步的时代,网页前

【名词】在前端开发中的“轮子”

最近在随便刷一些论坛,文档,常见一个名词"轮子". 自我理解:已封装完成的库.换个名词,组件.例如:图片轮播组建:swiper等,菜单栏组件. 在前端开发中,我们需要在满足条件下对于平台进行兼容,众所周知的IE系列,那么如果有一份已经写好的能够兼容各个浏览器的代码,进行封装以后直接引入使用显然会事半功倍. 作为练习,对于市场上主流的"轮子"进行仿造可以增加经验,也可以自己造轮子,只有自己动手做了才能够知道其中的知识点.

WEB前端开发中的图片压缩

web前端开发中,图片的重要性不言而喻,而由于一些图片的大小加上现在国内的网速不给力等种种原因,我们非常有必要对网站使用的图片进行压缩,压缩图片必然会带来图片质量的损失,我们要尽可能的在质量降低很小的情况下压缩图片,以便让网站更快的加载,提高用户体验度. 我在工作中,压缩图片用到了三个方法,分享给大家: 一.使用windows自带的画图工具 1.使用画图工具打开想要压缩的图片:2.什么都不用做,直接另存为你想要的图片格式,你会发现它比源文件小了很多,而且质量看不出来损失. 这个方法简单,快捷,压

【转载】一探前端开发中的JS调试技巧

友情提示:文中涉及较多Gif演示动画,移动端请尽量在Wifi环境中阅读 前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今天,如何在前端开发中降低开发成本,提升工作效率,掌握前端开发调试技巧尤为重要. 本文将一一讲解各种前端JS调试技巧,也许你已经熟练掌握,那让我们一起来温习,也许有你没见过的方法,不妨一起来学习,也许你尚不知如何调试,赶紧趁此机会

web前端开发中常用的尺寸和位置

我们在日常web前端开发过程中,会经常用到各种尺寸和位置.通常是js做动画的时候.轮播图,滚屏动画,粒子,碰撞检测,拖拽,滚动加载等等.这里我将常用的尺寸和位置的获取进行总结,不包括canvas,SVG. 在web页面开发中,尺寸和位置分为屏幕的尺寸和位置,元素的尺寸和位置,还有一个是文档的尺寸和位置,不过文档的尺寸和位置是通过document.body获取的,也算是一个元素.还有鼠标的位置.所以尺寸和位置主要分为三类: 屏幕尺寸和位置 元素尺寸和位置 特殊的元素,文档的尺寸和位置 鼠标的位置(

前端开发中务必要转义的三处场景

出于这样或那样的原因,我们在传输.存储.展现字符串时需要进行转义操作,防止不可控的事情发生.下面我将分三处场景描述,有的里边确实有坑,希望大家看完后都有所收获.欢迎积极留言补充. 场景1:使用URL 前端开发中,我们经常会使用到URL,比如博客查询的表单action:"http://eastme.me?q=前端".Ajax发送Get\Post请求.跳转至网址:"http://www.eastme.me/个人简介"等等.这些请求的URL经常会出现汉字,尤其是当表单提交