css相容調試常見情況及對應方法

然后CSS这样设计：

#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}

第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
也可以直接写成:
#container{ min-width:600px; *width:600px;}
这样就达到不管IE还是FF都是最小宽度为600PX了

7 清除浮动

.hackbox{ display:table; //将对象作为块元素级的表格显示}或者.hackbox{ clear:both;}

或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，

所 以并不影响到IE/WIN浏览器。这种的最麻烦的......#box:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;}

8 DIV浮动IE文本产生3象素的bug

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.

#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //这句是关键}

HTML代码

9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)

p[id]{}div[id]{}

这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用

属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

10 IE捉迷藏的问题

当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。

有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。

解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。

11 高度不适应

高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用

margin 或paddign 时。

例：

CSS：#box {background-color:#eee; }

#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }

解決方法：在物件上下各加2個空的div物件CSS程式碼：.1{height:0px;overflow:hidden;}或為DIV加上border屬性。

下面的方法是從另一個角度分析的方法：
瀏覽器BUG處理方法整理（部分）,供喜歡網頁設計的朋友共享：
1. 星號*
   IE都能識別*，標準瀏覽器如FF不能識別*。
   例：p { color:yellow; *color:red;}
   例：p { color:yellow; *color:red;}
   例：p { color:yellow; *color:red;}
   例：p { color:yellow; *color:red;}
   例：p { color:yellow; *color:red;}
   例：p { color:yellow; *color:red;}
   例：p { color:yellow; *color:red;}
   例：p { color:yellow; *color:red;}
   例：p { color:yellow; *color:red;}
   例：p { color:yellow; *color:red;}
   有類似的有
   + 加號
    中只有IE解釋
   p{color:red important
   IE6及以下將會忽略該樣式，IE7 FF將支援；
   p{color:red !important;color:yellow;}
   IE7 FF將紅色IE6顯示黃色
   此處注意的是按上述方法格式後才被IE6及以下忽略，除此之外的提高樣式權重方法可通用。
3.下劃線。
   IE6及以下版本將運用此樣式，其他將忽略
   p{color:red; _color:blue}
4、註解:   
    p {colorred};而在IE5及以下版本是不會被處理的,所以可以針對IE5/6進行區別
5、@IMPORT:
    在@IMPORT中使用URL來導入樣式,標準用法是將URL中的值帶上引號,如下@IMPORT URL("newstyle.css");這種用法可以被IE5以上的瀏覽器及FF支援,從而實現了IE4的樣式單獨處理.
    另外,還有一個方法:
    @IMPORT URL("noie .css") screen;
    screen是用於指定設備類型的選項,screen用於屏幕顯示,print用於打印設備顯示但是IE對這種方法不支持,,所有的IE瀏覽器,從而可以進行IE和FF的差別。
6、屬性選擇符:    用於對特定屬性的物件進行選擇
    span[class=left]{color:blue}     
    span[title]{color:red   
    span[title}{color:red   
    span[title}{color:red   
    span[title}{color:red  正常,所以可以分別處理IE和FF.
    在實際開發中,經常要對IE和FF進行分別處理,可以用如下代碼:
    #content{
    color:red; {
    color:blue
    }
   此種方法我覺得很實用，也常用，推薦朋友使用，如需更詳細的說明，我可以再貼。
7.子對象選擇子:
   span>p{color:red}
   IE6也是沒有支援,也可用來區別IE和FF
8、Tantek方法
   #content             voice-family:" "}"";
               voice-family:inherit;
           將不會被IE5.5及以下瀏覽器所解析.因此在IE6/7/FF上文字顏色將呈現紅色,在IE5.5及以下瀏覽器上將呈現藍色;
   另外,voice-family還有一種處理方式:
   #content{
          #content{
     voice-family:"}"
                voice-family:inherit;
       版本瀏覽器與FF瀏覽器的文字都呈現紅色,而IE5及以下版本瀏覽器呈現藍色!
9、轉義屬性
    p{width:200px;}
    IE5.5 以下將忽略。註：反斜線字元不能出現在0-9或字母a-f前面
10、IE中的條件註解
一、條件註解簡介
    IE中的條件註解（Conditional comments）對IE的版本和IE非IE有優秀的區分能力，是WEB設計常用的
    hack方法。
    條件註記只能用於IE5以上。
    如果你安裝了多個IE，條件註解將會以最高版本的IE為標準。
    條件註解的基本結構和HTML的註解()是一樣的。因此IE以外的瀏覽器將會把它們看作是普通的
註釋而完全忽略它們。
    IE將會根據if條件來判斷是否如解析普通的頁面內容一樣解析條件註解裡的內容。
二、條件註解屬性
    gt : greater than，選擇條件版本以上版本，不包含條件版本
    lt : less than，選擇條件版本以下版本，不包含條件版本
  版本，包含條件版本
    lte : less than or equal，選擇條件版本以下版本，包含條件版本
    ! : 選擇條件版本以外所有版本，無論高低
三、條件註解使用方法
    成英文中對應的大於或小於號
   
   
   
   
   
    下面的程式碼是在非IE瀏覽器下執行的條件註解
    您使用不是Internet Explorer
    您正在使用Internet Explorer version 6或一個非IE 瀏覽器