web前端兼容性问题注意事项

Css兼容问题困扰了很多web前端开发(maiziedu)员,特别是在进行web前端开发的时候,已经考虑了css兼容性问题,可是在预览网页的时候还是会出现各种各样的问题,今天小编就汇总了css各兼容问题,大家在前端开发时要注意了。
Css各兼容注意问题如下:
1.div 布局在ie浏览器和chrome浏览器,firefox浏览器不同,不如在div里面嵌套3个div,分别左中右,左边div的pading和 margin在ie8以上都是几乎相同,ie8以下做内边距x2,在中间的div在chrome和fierfox中默认在左边div的右边,而ie缺不是,解决这个问题设置一下左浮动就可以解决。
2.一个ul便签,如果设置左浮动,比如li>5,便签如果设置为水平显示,li由左往右,如果设置右浮动,就是从右往左。比如一个导航栏,
首页 购买记录 关于   這是左浮动
关于 购买记录 首页   這是右浮动
3. 比如一个便签<p>全面一行都会空两个空格,空格可以用&nbps;但是每个浏浏览器的空格距离不相同,ie浏览器距离比较大,所有 调兼容性最好不要用&nbps;有缩进,用css控制缩进,text-indent:2em;空两个字体的空间,很灵活,无论字体多大都是两个字 体的距离,只是在首行空两个字体距离。
4. 一般两个模块,左右的外边距会合并,而上下的外边距会取其中的最大值。就如左边模块的margin-right=10px,右边模块的margin- left=10px,他们之间的距离就为20px;如果上模块的margin-bottom=10px,下模块的margin-top=20px,则两个 模块的距离为20px,取最大那个。(内边距不能为负值,外边距可以为负值)一般都把所有便签的内外边距清空,因为每个浏览器的默认值的不同。做兼容性更加容易。一般在css文件中定义 *{padding=0px;margin=0px;}
5.块级元素比如<p></p>默认宽度为100%,所以要用选择器来改变默认值。水平居中一半不用align=“center”,新浏览器都抛弃,一半用css控制 margin=任意px,auto;就水平居中了。
6.Ie6不支持display:inline-block,一般不用。
7.父级div管不着有浮动的子div,溢出,为了解决这个问题,一般在父级div加上,overflow:hidden;
8.因为scr是行内块级元素,所以不能用margin:0px,auto(只能用于块级元素);居中,若要使他居中,转化成块级元素 diaplay:block;
9.相对定位和绝对定位
有定位属性默认层级都为0. z-index,如果都没有定义层级,后来者居上。
相对定位一般是模块当前位置。
绝对定位是相对于最近有定位父级的模块进行定位。
(z-index可以实现 许愿墙 )
(z-index=-1,那么里面的东西点不了,)
10.display:none;隐藏,位置不存在
  Visibility:hidden;隐藏,位置还存在
11.css2设置透明度,w3c用opacity:0-1;
 Ie用filter:alpha(opacity=0-100);
一般做兼容两个一起写
12.li {list-style-type:none;}取消li下的小圆点。一般用来做导航。
13.有时候在ie浏览器加入背景图没效果,但是火狐和谷歌就可以正常显示,试试把png转化成jpg试试。
14. 总结用css3的特性只能在ie9以上的浏览器使用,如果要求ie9以下的浏览器,请放弃css3,不然你调兼容的时间比你写代码的时间还要多,一般国外已经放弃用ie9以下的浏览器,但是中国还用一些林婉不顾的老顽童用xp,淘宝都准备抛弃ie8以下的浏览器。给开发者建议,做一个网页需要负责任,有些官方的网页只能用ie打开,那效果不堪一看,连刚刚写前段网页的都能写出来,代码就像不是程序员写的,我看过广州市某个官方图书馆的官网,看完我感觉没爱了。其实兼容是靠经验的。多用火狐调试器看看自己的布局,花点时间,就能调出,一半ie下默认的值,你只要重置一下就ok,还有div的位置不相同,设 置一下float就行,float不行就用定位,慢慢琢磨,以后开发遇到问题就能及时发觉,以上的都是我记得的兼容方法,有好多没有写出来。
以上就是web前端开发员在工作时遇到各种各样的css兼容问题,比提出了解决的方法,通常情况下,我们遇到问题,都会去百度或者问别人,可是别人也不能帮助的时候,这个时候就只能靠自己了,自己就要从工作中慢慢琢磨,积累,这样才能进步.
2016-04-19 18:54 添加评论 分享
已邀请:

要回复问题请先登录注册

退出全屏模式 全屏模式 回复