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的时候他们就结合在一起了，至今不知道原因何在。所以如果有朋友如有更多的实战经验，欢迎留言，大家一起记录下来。

确切的说，上面的代码和google关系不大，仅仅是圆形背景采用了google的图片而已。注意由于IE6对png图片的支持有限，所以该效果在IE6下有点别扭，IE7和FF正常。管他的呢，IE6马上就要推出历史的舞台了。好了，下面正式分享另外一个纯google的圆角中空样式（可惜我今天才发现，要不然就得节约我很多资源了）
代码：

效果：

————–华丽的结束此文—————–

/*后面的描述和位置无关，所以后面的例子请大家关注本行之前的描述*/
width:220px;height:20px;
left:50%;
margin:0 0 0 -110px;/* 将div将左端推进一半的长度，这样才能显示到真正的中间 */
border:1px solid red;
}
如果你用这段css去做实验的话，我相信多数朋友看不到应有的效果，原因在于你用的是IE，那个对w3标准支持不完善的浏览器，如果你用firefox的话，应该是没有任何问题的。不过我们得承认现实，毕竟IE的浏览器占据了绝大部分市场，所以必须写出兼容IE的css才行。由于IE不支持fixed，因此，可以针对IE和FF写不同的css，如：
div#LoadingStatus { position: absolute; left: 0px; top: 0px; }
body > div#LoadingStatus { position: fixed;/*这个描述IE不认识，因此针对其他浏览器有效*/ }
上面的代码解决了兼容的问题，但是IE下的依然不能将div固定在屏幕的具体位置，因此我们只有出绝招了，那便是写出兼容的css，代码如下（传说出现表达式的css出现了）：

div#LoadingStatus{
left: 50%;
top: expression( document.body.scrollTop +100 +'px' );/*按照表达式计算出当前屏幕位置所对应的网页位置*/
}
body > div#LoadingStatus{ position: fixed; left: 0px; top: 100px; }

这样看来似乎已经很完美了，应该能够得到我们需要的效果了，不信，你自己试一试。对不起，让你失望了，这还是不行，因为我们在拉动滚动条的时候，针对IE的那段css中的表达式罢工了，仅仅是载入页面的时候进行了计算，后面就不干活了，这可如何是好？别担心，一个IE的bug而已，我们只要将表达式的值赋给一变量，这个问题就解决了，所以下面的css就可以正常工作了：
#LoadingStatus{
position:fixed !important;/*important针对FF，这样后面的position描述就没有用了 */
position:absolute;/* 针对IE */
top:100px;
top: expression( ( 100 + ( noValue = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
/*上面这个表达式针对IE，FF不认识该表达式，所以top的值就是100px了 */

}

那么如何将div固定在左上角或者右下角呢？下面给点css代码，应该自己看看就能明白了：
div#LoadingStatus {
/* IE5.5+/Win – this is more specific than the IE 5.0 version */
right: auto; bottom: auto;
left: expression( ( -20 – fixme.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( noValue2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + ‘px’ );
top: expression( ( -10 – fixme.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( noValue = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + ‘px’ );
}
忘记给案例了，要不又有朋友有意见了，案例请参见附件：fix.html