一些CSS小窍门

CSS兼容是一个很头疼的问题，浏览器太多，有不守规矩的IE6、比较守规矩的IE7和将来不知道怎么去守规矩的IE8，不断进化的IE和多浏览器共存将会给很多web开发者带来新一轮的头疼问题。朋友可能注意到，我前面的浏览器都只提了IE，而没有说FireFox。可能在以前，很多web开发者特别是国内的web开发者根本就没有兼容的这个烦恼，首先他们不关心Firefox，并且那个时候的页面也不是DIV+CSS模式，即使后来DIV+CSS模式流行起来了，他们依然不关心兼容的问题，因为在他们心中就只有一个IE6，需要和谁兼容去？可是如今IE也开始不让他们消停了，这不得不说是一件好事情。首先IE本身的多版本已经让国内大多数开发者开始注意兼容的问题了，而从IE7可以看得出来，微软也慢慢的在向标准靠近，最终解放的还是we开发者。而微软浏览器特有的渲染效果逐渐被淡化也是一个很好的现象，至少我们现在很少看到网页在用vbs脚本了！

cosbeta在业余做网页的过程中也遇到不少的麻烦，然而都能很好的解决掉了，在此过程中，也算是积累了不少的经验，打算在这里写下来，和大家一起分享。

1. div居中的问题。有这样一个需求，整个网页的宽度是800px，需要将页面居中，如本blog（storyday.com）。可能你会这样解决(为了方便，下面的css代码多直接写在div中，实际使用请自行选择css代码的嵌入方式)
   
   main

   left

   right

   footer

   
   用IE打开看，相当完美，可是你用FF打开看看，问题出来了，因为没有float属性的id=page的div并不会自动适应高度，所以#page没有像你希望的那样将left和right都包含进来了，IE7也是如此，那么下面是我常用的解决办法，今后遇到类似的情况可以如此解决，请注意看class=”page”的css代码:
   


   main

   left

   right

   footer

2. UL的问题这个困扰了很多朋友的问题，cosbeta也常常在论坛上遇到这样的提问，因为如论怎么修改，列表在IE和FF中就是不一样，所以这个时候我们要将ul的padding和margin属性给指定出来，如ul{margin:0;padding:0;list-style:none} ul li{margin:0;padding:0},之后你就会发现他们的效果是一样的了，归根结底还是浏览器对ul的默认显示效果不一样所导致。
3. 空DIV问题和clear:both的问题 空div的问题如下
   

   这段代码在FF下很正常，div的高度确实是1px，可是在IE下，该DIV怎么都高于1px，于是这个高度差，往往导致整个页面的不协调，这个原因是IE默认div的高度为当前字体的高度，所以比字体小的高度是无法显示正常的，那么知道这一点之后，我们可以这样修改

   clear:both这个css属性是我们在用float方式排版中最重要的工具，比如3个div，left，right和footer，我们需要footer在left和right的下方，即footer换行排列，如果不采用clear:both，可能会不能满足你的要求，不相信看下面的两个例子
   

   left
   right
   footer

   
   加了clear:both之后：
   

   left
   right
   footer

   
   所以在实际做网页的时候，我们可以定义一个div，样式表为.clear{clear:both;height:1px;font-size:1px}在需要换行的地方，直接插入一个div class=”clear”即可，这个算是cosbeta的技巧，不知道你如何认为呢？

4. !important的使用我们都知道，在css中总是以最后定义的为准，比如egg{width:100px;height:100px;width:200px},那么实际生效的width应该是200px，而FF和IE有一个important属性，IE6不支持该属性，所以一个DIV，由于不兼容导致我们需要在IE7、FF中设置高度为100px，在IE6中设置为90px，那么CSS可以这样写
   .mydiv{width:100px !important;width:90px}可能这个特性基本都用过吧

其实css 兼容技巧都是在实际中总结出来的，由于记忆的问题，就没有办法一一列举出来，比如上次和zhiqiang讨论一个css的时候就遇到一个怪异的问题，两个div，如果没有border，则总会分开，当设置border为1的时候他们就结合在一起了，至今不知道原因何在。所以如果有朋友如有更多的实战经验，欢迎留言，大家一起记录下来。