保定网站建设,网站推广,网站优化服务,保定专业的PHP网站制作机构!

不同浏览器编程之Css Hack小结 (摘)

发表于:2008年07月03日 18时  作者:dx_andy

无聊时浏览网站却发现这么个好东西,顺手摘了下来,内容如下:

CSS HACK

1, !important 随着IE7对!important的支持,!important 方法现在只针对IE6的HACK。(注意写法:记得该声明位置需要提前)

CSS代码
  1. #wrapper{   
  2.     width100px!important/* IE7+FF */  
  3.     width80px/* IE6 */  
  4. }  

 2, IE6/IE77对FireFox

CSS代码
  1. #wrapper{   
  2.     #wrapper { width120px; } /* FireFox */  
  3.     *html #wrapper { width80px;} /* ie6 fixed */  
  4.     *+html #wrapper { width60px;} /* ie7 fixed, 注意顺序 */  
  5. }  

 注意:*+html 对IE7的HACK 必须保证HTML顶部有如下声明:

XML/HTML代码
  1. <!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.01 Transitional//EN” ”http://www.w3.org/TR/html4/loose.dtd”>  

 万能float闭合(非常重要!)

将以下代码加入Global CSS 中,给需要闭合的div加上 class=”clearfix” 即可,屡试不爽。

CSS代码
  1. /* Clear Fix */  
  2.   
  3. .clearfix:after    
  4. {    
  5. content:“.”;    
  6. display:block;    
  7. height:0;    
  8. clear:both;    
  9. visibility:hidden;    
  10. }    
  11. .clearfix    
  12. {   
  13. display:inline-block;   
  14. }   
  15. /* Hide from IE Mac \*/    
  16. .clearfix {display:block;}    
  17. /* End hide from IE Mac */    
  18. /* end of clearfix */  

其他兼容技巧(再次啰嗦)

1,FF下给div设置padding后会导致width和height增加, 但IE不会。(可用!important解决)

2,居中问题:

    1) 垂直居中:将line-height设置为当前div相同的高度,再通过vertical-align:middle。( 注意内容不要换行)
    2) 水平居中:margin: 0 auto;(当然不是万能)

3,若需给a标签内内容加上样式,需要设置display: block;(常见于导航标签)

4,FF和IE对BOX理解的差异导致相差2px的还有设为float的div在IE下margin加倍等问题。

5,ul标签在FF下面默认有list-style和padding。最好事先声明,以避免不必要的麻烦。(常见于导航标签和内容列表)

6,作为外部wrapper的div不要定死高度,最好还加上overflow:hidden;以达到高度自适应。

7,关于手形光标:cursor:pointer;而hand只适用于IE。

 订阅“PHPLAMP博客”方便及时获取网站内容

PHPLAMP博客是专注于网站建设,搜索引擎研究,网站推广,网站优化的IT博客。

有关, , , 的相关文章:

发表一下您对本文的意见