DIV+CSS解决IE6,IE7,IE8,FF兼容问题行之有效的办法

开发 前端
关于IE兼容性问题仁者见仁智者见智,这里向大家简单介绍一下DIV+CSS如何解决IE6,IE7,IE8,FF兼容问题,希望你会感兴趣。

本文和大家重点讨论一下DIV+CSS如何解决IE6,IE7,IE8,FF兼容问题,主要从七个方面来向大家讲解,相信本文介绍一定会让你有所收获。

DIV+CSS解决IE6,IE7,IE8,FF兼容问题

1.IE8下兼容问题,这个最好处理,转化成IE7兼容就可以。在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了:
 

  1. <metahttp-equivmetahttp-equiv="x-ua-compatible"content="IE=7"/> 
  2.  

2.flaot浮动造成IE6下面双倍边距问题,这个最常见,也最好处理,!important解决,比如
margin-left:10px!important;/*IE7,IE8,FF下是10PX*/;
margin-left:5px;/*IE6下属性写的是5PX,但在显示出来的是10px

3.清除块display,这个可以解决浮动造成的块,造成块后,当DIV背景填色或填图片的时候,会出现背景断开或差一小块。这种兼容出现的不太多,我做到现在,只遇到过两次,方法是在出现兼容的DIV的CSS中写一个display:block,或其它属性,中文什么意思我不知道,我英语差,但能达到想要的效果,6e"Z+e%|8G#|

4.很多朋友DIV+CSS的时候,会出现,在IE的几个浏览器下都好了,但是在FF出问题了,用!important又会把IE7做的不兼容,很头疼,在想,有没有什么方法只对FF下进行操做,我用过这个方法,感觉得是百试不爽,就是在属性前面加符号如:*、&,¥,#,@,—,+,加过符号的属性只有IE的浏览器才识别,而FF不识别,方法如下(注意有符号的属性和没符号的属性的顺序)
height:100px;/*FF下显示100的高*/
+height:120px;/*IE678下显示120高*/

5.有时候,会在布局的时候,发现,有一个DIV浮动了,接下来的一个DIV本来是要在下面显示的,结果跑上面去了,这种情况一般在FF下面会出现,解决的办法就是清除一下浮动,在设置过浮动的那个DIV下面加一个DIV,CSS面写个clear:both;如下

  1. <divstyledivstyle="float:left;height:100px;width:500px;"> 
  2. <divstyledivstyle="clear:both;"> 
  3. <divstyledivstyle="height:100px;width=300px"> 

 6.再就是居中问题,这个问题在新手身上很多,主要原因是对盒子模型不够理解,没熟记盒子模型,如果发现你的页面没有局中,我现在知道的,有这几个原因:

1.一个是没盒子,就是BODY后的一个大DIV把所有DIV装起来的那个,你没写。

2.就是你写了,但是宽度没用绝对宽度:而是用一个相对的宽度,想局中,必须用绝对宽度。-

7.扩展:如果我想在设计的时候,实现IE6,IE7,FF下出现三种不同的效果,比如IE6下背景红色,IE7下蓝色FF下绿色,这里,我自己试过,可以,用兼容的方法(注意顺序,可以好好理解一下)。

7L&t-o7k-a1I
background:red;/*FF里显示的红色*/
+background:blue!important;/*IE7下面显示的蓝色*/
+background:green;/*IE6下面显示的绿色*/
 

【编辑推荐】

  1. 解决IE6、IE7、Firefox兼容性最简单方法揭秘
  2. 探究IE8与IE7具体功能中窗口功能按钮的变化
  3. IE6 IE7 IE8三个版本的CSS兼容速查手册
  4. 探秘IE8 JavaScript功能超乎想象
  5. 技术前沿 一段JS代码轻松解决IE6-IE8的兼容性问题

 

 

责任编辑:佚名 来源: hi.baidu.com
相关推荐

2010-08-20 13:15:54

IE6IE7IE8

2010-08-17 16:27:52

IE6IE7IE8

2010-08-18 14:42:16

IE6IE7IE8

2011-06-03 15:41:27

CSS HACK

2010-08-27 14:55:23

IE6IE7IE8

2010-08-19 14:19:12

IE6IE7IE8

2010-08-18 10:24:51

IE6IE7IE8

2010-08-27 15:08:10

FirefoxIE6IE7

2010-08-18 15:22:28

IE6IE7Firefox

2010-09-16 13:17:31

IE6IE7IE8

2010-08-30 09:35:35

IE6IE7Firefox

2010-08-20 09:33:22

IE6IE7IE8

2010-09-15 11:08:48

CSSIE6IE7

2010-08-18 10:37:16

IE6IE7IE8

2010-08-18 15:57:14

IE6IE7IE8

2009-08-13 10:12:07

IE的CSS Bug

2010-08-19 10:13:25

marginFFIE6

2010-09-16 13:33:47

IE6IE7IE8

2010-08-18 13:45:07

IE6IE7FF

2010-08-18 16:10:35

IE6CSS
点赞
收藏

51CTO技术栈公众号