PHPLAMP网站建设 » !important http://www.phplamp.org PHPLAMP提供保定网站建设，网站推广优化服务。 Tue, 31 Aug 2010 09:56:43 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 不同浏览器编程之Css Hack小结 (摘) http://www.phplamp.org/2008/07/css-hack-important/ http://www.phplamp.org/2008/07/css-hack-important/#comments Thu, 03 Jul 2008 18:14:16 +0000 admin http://www.phplamp.org/?p=106 无聊时浏览网站却发现这么个好东西，顺手摘了下来，内容如下：

一 CSS HACK

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

CSS代码
  1. #wrapper{   
  2.     width: 100px!important; /* IE7+FF */  
  3.     width: 80px; /* IE6 */  
  4. }  

 2, IE6/IE77对FireFox

CSS代码
  1. #wrapper{   
  2.     #wrapper { width: 120px; } /* FireFox */  
  3.     *html #wrapper { width: 80px;} /* ie6 fixed */  
  4.     *+html #wrapper { width: 60px;} /* 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。

]]> http://www.phplamp.org/2008/07/css-hack-important/feed/ 0