提高CSS对浏览器的兼容性！不是看你代码有多强，是看你对问题的态度

对于页面的CSS样式，我们开发人员一般只会写一种方式，但一方式很难去适应所有浏览器，或者同一浏览器的各种版本，但如果你要设计一个完美的系统，又必须要去

考虑这个问题，下面是我对CSS样式设计的一个想法：

1 将公有部分，没有兼容的部分放在一个CSS文件里

2 将各个浏览器的个性CSS代码（有兼容性的代码）分别放在自己的文件中

3 通过CSS的IF来进行动态的选择

看代码：

 1  <link href="site.css" rel="stylesheet" type="text/css" /><!--公有通用样式CSS文件-->
 2 <!--[if gte IE 9]>
 3 <link href="ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
 4 <![endif]-->
 5 <!--[if IE 8]>
 6 <link href="ie8.css" media="screen, projection" rel="stylesheet" type="text/css" />
 7 <![endif]-->
 8 <!--[if lte IE 7]>
 9 <link href="ie7.css" media="screen, projection" rel="stylesheet" type="text/css" />
10 <![endif]-->

我们可以看到，它对IE9，IE8和IE7进行了过滤，如果你用IE8，那么页面就加载IE8的CSS样式。

页面HTML代码不用修改，各种版本的CSS只用一个HTML主体

 1 <div class="group" id="content">
 2                 <div class="zone zone-content">
 3 <form method="post" action="/Admin/ContentTypes/EditPart/zzl">    <fieldset>
 4         <label for="Name">名称</label>
 5         
 6         <input type="text" value="zzl" name="Name" id="Name" disabled="disabled" class="textMedium">
 7         <input type="hidden" value="zzl" name="Name" id="Name">
 8     </fieldset>
 9     <div class="manage-part">
10         <div class="settings">
11 
12 <fieldset>
13     <input type="checkbox" value="true" name="ContentPartSettings.Attachable" id="ContentPartSettings_Attachable" class="check-box" checked="checked"><input type="hidden" value="false" name="ContentPartSettings.Attachable">
14     <label class="forcheckbox" for="ContentPartSettings_Attachable">Attachable</label>
15     <span class="hint">Check to allow this part to be attached to other content types.</span> 
16     
17 </fieldset>        </div>
18         <h2>字段</h2>
19         <div class="manage add-to-type"><a href="/Admin/ContentTypes/AddFieldTo/zzl" class="button">新增</a></div>
20         
21     </div>
22     <fieldset class="action">
23         <button value="Save" name="submit.Save" type="submit" class="primaryAction">保存</button>
24         <button itemprop="RemoveUrl" value="Delete" name="submit.Delete" type="submit" class="primaryAction">删除</button>
25     </fieldset>
26  </form>
27 </div>
28             </div>

怎么样，这种方式不错吧，页面清晰，逻辑清晰，代码清晰，CSS也面向对象了！呵呵。