css兼容调试常见情况及相应方法.docx

CSS：

#box{background-color:

#eee;}

#boxp{margin-top:

20px;margin-bottom:

20px;text-align:

center;}

解决方法：

在P对象上下各加2个空的div对象CSS代码：

.1{height:

0px;overflow:

hidden;}或者为DIV加上border属性。

下面的方法是从另一角度分析的方法：

浏览器BUG处理方法整理（部分）,供喜欢网页设计的朋友共享：

1.星号*

  IE都能识别*，标准浏览器如FF不能识别*。

  例：

p{color:

yellow;*color:

red;}

  类似的有

  +加号

  只有IE解释

  p{color:

red;+color:

blue}

  IE显示blueFF显示red

2.!

important

  IE6及以下将会忽略该样式，IE7FF将支持；

  p{color:

red!

important;color:

yellow;}

  IE7FF将红色IE6显示黄色

  此处注意的是!

important方法只是按上述格式后才被IE6及以下忽略，除此之外的提高样式权重方法可通用。

3.下划线。

  IE6及以下版本将运用该样式，其他将忽略

  p{color:

red;_color:

blue}

4、注释:

   p{color:

red};    

   这种样式在IE6中是可以应用显示的,而在IE5及以下版本是不会被处理的,所以可以针对IE5/6进行区别

5、@IMPORT:

   在@IMPORT中使用URL来导入样式,标准用法是将URL中的值带上引号,如下@IMPORTURL（"newstyle.css"）;这种用法可以被IE5以上的浏览器及FF支持,从而实现了IE4的样式单独处理.

   另外,还有一个方法:

   @IMPORTURL（"noie.css"）screen;

   screen是用于指定设备类型的选项,screen用于屏幕显示,print用于打印设备显示但是IE对这种方法不支持,,所有的IE浏览器,从而可以进行IE和FF的区别。

6、属性选择符:

   用于对具有特定属性的对象进行选择

   span[class=left]{color:

blue}    

   span[title]{color:

red;}   

  IE6不支持,但是在FF里面工作正常,所以可以对IE和FF进行分别处理.

   在实际开发中,经常要对IE和FF进行分别处理,可以用如下代码:

   #content{

   color:

red;

   }

   [xmlnx]#content{

   color:

blue

   }

  此种方法我觉得很实用，也经常用，推荐朋友使用，如需更详细的说明，我可以再发贴。

7.子对象选择符:

  span>p{color:

red}

  IE6也是没有支持,也可用来区别IE和FF

8、Tantek方法

  #content{

              color:

blue;

              voice-family:

"\"}\"";

              voice-family:

inherit;

              color:

red;

  }

  上面的代码在使用了voice-family之后下面的color:

red,将不会被IE5.5及以下浏览器所解析.因此在IE6/7/FF上文本颜色将呈现红色,在IE5.5及以下浏览器上将呈现蓝色;

  另外,voice-family还有一种处理方式:

  #content{

               color:

red;

               voice-family:

"}"

               voice-family:

inherit;

               color:

blue;

  }

  使用这个方法,将使IE6及以下版本浏览器与FF浏览器的文字都呈现红色,而IE5及以下版本浏览器呈现蓝色!

9、转义属性

   p{w\idth:

200px;}

   IE5.5以下将忽略。

注意：

反斜线字符不能出现在0-9或字母a-f前面

10、IE中的条件注释

一、条件注释简介

   IE中的条件注释（Conditionalcomments）对IE的版本和IE非IE有优秀的区分能力，是WEB设计中常用的

   hack方法。

   条件注释只能用于IE5以上。

   如果你安装了多个IE，条件注释将会以最高版本的IE为标准。

   条件注释的基本结构和HTML的注释（

––>）是一样的。

因此IE以外的浏览器将会把它们看作是普通的

注释而完全忽略它们。

   IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。

二、条件注释属性

   gt:

greaterthan，选择条件版本以上版本，不包含条件版本

   lt:

lessthan，选择条件版本以下版本，不包含条件版本

   gte:

greaterthanorequal，选择条件版本以上版本，包含条件版本

   lte:

lessthanorequal，选择条件版本以下版本，包含条件版本

   !

:

选择条件版本以外所有版本，无论高低

三、条件注释使用方法

   注意把代码中的<>换成英文中相应的大于或小于号

--[ifIE5]>仅IE5.5可见

[endif]-->

--[ifgtIE5.5]>仅IE5.5以上可见

[endif]-->

--[ifitIE5.5]>仅IE5.5以下可见

[endif]-->

--[ifgteIE5.5]>IE5.5及以上可见

[endif]-->

--[ifiteIE5.5]>IE5.5及以下可见

[endif]-->

--[if!

IE5.5]>非IE5.5的IE可见

[endif]

   -->

   下面的代码是在非IE浏览器下运行的条件注释

--[if!

IE]>

-->您使用不是InternetExplorer

--

[endif]-->

--[ifIE6]>

-->您正在使用InternetExplorerversion6或者一个非IE浏览器

--

[endif]-

下面的是总结的三个综合解决的方法：

第一种：

 .div{

 backgroundrange;

 *background:

green!

important;

 *background:

blue;

}

第二种：

.div{

 margin:

10px;

 *margin:

15px;

 _margin:

15px;

}

第三种：

#div{color:

#333;}

*html#div{color:

#666;}

*+html#div{color:

#999;}