CSS手写代码总结

在这里说明一下，那个!important这个写法，在IE6以上都是可以认到的。并不是网上所说的IE6不能识别！它能识别到!important，但不能理解它是优先级更高的意思！！！！

 

很多时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,也叫写CSS hack。

由于不同的浏览器对 CSS 的支持及解析结果不一样，还由于 CSS 中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的 CSS 。

比如  IE6 能识别下划线 "_" 和星号 " * " ， IE7 能识别星号 " * " ，但不能识别下划线 "_" ，而 firefox 两个都不能认识。等等

书写顺序，一般是将识别能力强的浏览器的 CSS 写在后面。下面列举常用的 CSS hack 方法

CSS 书写技巧 -1 ： !important( 个人非常少用，因为一直都是定 IE hack ，所以样式都是先在 Firefox 那里测试，再写 IE 方面的样式。 )

!important 作用是提高指定样式规则的应用优先权。

IE7 以及所有标准浏览器能识别 !important

区别 IE6 与 IE7 与其他浏览器

1. .browserTest {  
2.     border:20px solid #60A179!important;  
3.     border:20px solid #00F;  
4. } 
5.  

在 Mozilla 中或者 IE7 浏览时候，能够理解 !important 的优先级，因此显示 #60A179 的颜色：

在 IE6 中浏览时候，不能够理解 !important 的优先级，因此显示 #00F 的颜色：

CSS 书写技巧 -2 ： *

IE 都能识别 * ；标准浏览器 ( 如火狐 ) 不能识别 *

区别 IE6 与火狐 ( 如果按下面的那种方法写的话，用 Firefox 的 Web Developer 插件的时候，会报错！ )

1. .browserTest{  
2.     border:20px solid #60A179;  
3.     *border:20px solid #00F;  
4. } 

区别 IE7 与火狐

1. .browserTest {  
2.     border:20px solid #60A179;  
3.     *border:20px solid #00F;  
4. } 

 

区别 IE7 ， IE6 与火狐

1. .browserTest  
2.     {  
3.     border:20px solid #60A179;  
4.     *border:20px solid #00F!important;  
5.     *border:20px solid #333;  
6. } 

 

CSS 书写技巧 -3 ： _

IE6 支持下划线， IE7 和 firefox 均不支持下划线

区别 IE7 ， IE6 与火狐 ( 如果按下面的那种方法写的话，用 Firefox 的 Web Developer 插件的时候，会报错！ )

1. .browserTest{  
2.     border:20px solid #60A179;  
3.     *border:20px solid #00F;  
4.     _border:20px solid #333;  
5. }  
6. /*不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面*/ 

 

CSS 书写技巧 -4 ： *+html 与 *html

*+html 与 *html 是 IE 特有的标签 , firefox 暂不支持 . 而 *+html 又为 IE7 特有标签 ( 在写的时候 *html 中间一般要有一个空格，要不然在 Firefox 的 Web Developer 插件的时候，会报错 )

1. .browserTest{ width:120px; }/* Firefox fixed */  
2. * html.browserTest{ width:80px; }/* ie6 fixed */  
3. *+html.browserTest{ width:60px; }/* ie7 fixed */ 

 

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

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

处理nternet Explorer的Bug

双倍Bug

在IE下，当一个div设置了float后，然后给他设置margin，就会出现加倍的margin，解决的办法是给div设置

#float{  float:left;  margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/ } 

 

边距翻倍只有当元素的边距碰到它包含块的边沿时才会发生，因此当一个元素被浮动到左边靠到另一个左浮动的元素时，它的左边距不会翻倍！

Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,...不可控制(内嵌元素);

3px的间隙

非浮动的列没有固定的宽度或者高度：如果如浮动相邻的列没有定义任何尺寸，那么你会发现在这个列的边沿与其内部文本之间有个3px的缩进。这个间隙只沿着浮动显示，因此当浮动终止时，文本就会移回到这个列的边上。(如果用Dreamweaver CS4检查的时候，就会有提示的了！)

非浮动的列有一个固定的宽度或者高度：当与浮动相邻的列有一个固定的布局尺寸时，又有一个3px的错误出现了---在两列之间有一个小间隙。这个问题的解决方法分两步。首先，你必须消除非浮动列的左边距(但只针对IE6及其更早的版本)：

* html #mainColumn { margin-left:0px; }

然后，必须设定浮动列的右边距为3px。这样把非浮动的列推回到位置上：

* html #sidebar { margin-right:-3px; }

 

 

 

 

 

 

 

 

 

转载于:https://blog.51cto.com/webview/288668