兼容

1、在坑爹的IE6下，当元素出现缝隙或者是消失时，解决方法：给元素加宽度或者高度。

2、在坑爹的IE6下，当元素浮动左或右，不能在标签前后加注释。问题现象，会复制最后一个文字，解决方法，在盒子末尾处加一个空白标签。如:<div></div>

3、在HTML5版本下，插入图片（img）会自动露出几像素的缝隙，解决方法：
     (1)img{ display:block;}
     (2)img{ vertical-align:top; 或者 vertical-align:bottom;}
     (3)img{ font-size:0;}
     (4)给img标签设置float属性；
     (5)给父级盒子加高度并且设置溢出隐藏；

4、在坑爹的IE6下，当盒子浮动时(float)，给盒子加左右的margin，IE6下会出现加倍的问题（上下不会出现）。解决方法: { display:inline;}

5、当一个元素浮动或者绝对后，该元素会自动转换为块级元素；

6、当表单元素纵向对齐时，有些浏览器会在表单元素下面高度，表单不能对齐。解决方法：设置元素为块级元素或者浮动左右。

7、当父集元素设置行高时，子集元素设置高度时，在IE6下浮动属性会失效。解决方法：避免父集加行高子集加高度。

8、margin塌陷：如果两个div不浮动的情况下，第一个margin-bottom和第二个margin-top的值哪个最大就是他们之间的距离。

9、行高：1、盒子的高度/行数
         2、盒子不加高度，用padding上下给一样的高度 左右为0；
10、浏览器的区分
       selector{
           property:value       /*所有浏览器兼容*/
           property:value\9     /*所有IE兼容*/
           +property:value      /*IE6,IE7*/
           _property:value      /*IE6*/
       }
       调IE6的属性时把属性放在最后面
11、左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距. 解决方法：给左盒加_margin-right:-3px;

12、IE6不能设置15px以下盒子的高度。解决的方法也有很多,例如:overflow:hidden或者line-height:1px

13、游标手指cursor      cursor:pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以

14、IE专用条件注释
        <!--[if IE]>所有IE可识别<![endif]-->
        <!--[if IE 6]>只有IE6可以识别<![endif]-->
        <!--[if IE 7]>只有IE7可以识别<![endif]-->

        <!--[if gt IE 6]>IE6以上版本可以识别<![endif]-->
        <!--[if lt IE 6]>IE6以下版本可以识别<![endif]-->

        <!--[if gte IE 6]>IE6及IE6以上版本可以识别<![endif]-->
        <!--[if lte IE 6]>IE6及IE6以下版本可以识别<![endif]-->

        <!--[if !IE]>除IE外都可以识别<![endif]-->

                IE6选择器专有注释： 在选择器之前加 * html
                IE7选择器专有注释： 在选择器之前加 * +html

15、万能轻浮： clear:both; height:0; overflow:hidden;

16、超级鼠标样式
    a:link { color:#FF0000} /* 未访问的链接 */
    a:visited { color:#00FF00} /* 已访问的链接 */
    a:hover { color:#FF00FF} /* 鼠标移动到链接上 */
    a:active { color:#0000FF} /* 选定的链接 */
    超级链接伪类使用时必须遵循“L-V-H-A”
        IE6浏览器只支持a标签鼠标经过效果。(:hover）“爱恨”原则
        选择标签第一个字符
        :first-letter
17、div透明块兼容所有浏览器 IE6不支持
       opacity:0.5;
       filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
       filter:alpha(opacity=50);

       IE9支持rgba
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);

       IE9支持渐变
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000,gradientType='0');
18、flash背景透明 wmode="transparent"

19、解决12px以下文字大小无法显示问题
       将一下内容放到body标签样式当中： -webkit-text-size-adjust:none;  现在已经不好使了。

20、浮动时，父级元素无法撑开
       解决方案：全局增加样式
       .clearfix:after(contect:".";display:block; height:0; clear:both; visibility:hidden;)
       .clearfix(zoom:1)
       父级元素调用clearfix
       效果跟万能轻浮一样

21、多行文本框：IE6会默认出现滚动条 解决方案： 设置：{ overflow:auto;}

22、span a等行内元素空格或者回车出现3像素空隙 解决方案： 1写成一行。 2将父级标签font-size初始化为0，然后重新设置元素的字体大小

23、IE7以下版本 两个以上li浮动，li之间出现空白间隙 解决方案：li{ vertical-algin:top;}

24、使用滤镜PNG图片透明后，容器内链接失效  解决方案：为容器里面的a加个{ _position:relative}样式

25、IE6无法识别伪对象 :first-letter/first-line 解决方案：选择符与“｛”之间增加空格，或者换行。

26、IE6忽略同一条样式体内的!imgportant规则  解决方案：将给样式拆分为2条，!important单独书写

27、IE7及以下版本 元素设置了{ position:relative;}相对定位，父级元素{ overflow:auto/hidden}失效  解决方案：给父级元素增加 { position:relative}

28、如何让文本垂直对齐文本框  解决方案：input{ vertical-align:middle;}

29、强制文本一行显示  解决方案:设置容器的{ width }和{ white-space:nowrap;}
       word-wrap:break-word;自动换行(不截断)
       word-break:break-all;自动换行(截断)
       white-space:nowrap; 规定段落中的文本不进行换行：
       text-overflow:ellipsis;显示为省略号
30、如何使文本边界显示为省略号  解决方案:  .text{ width:150px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

31、让连续的长字符串自动换行  解决方案：{ word-wrap:break-word;}

32、如何让table边框1个像素细  解决方案：table{ border-collapse:collapse;}

33、网页无色，让网站显示灰色  1、*{ filter:gray; color:gray;}
                               2、html{ filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}

34、font复合属性快捷写法的格式：font: font-style font-variant font-weight font-size/line-height font-family;
                                      italic     small-caps   normal      13px/150%             arial,黑体,宋体

35、IE下z-index失效 解决方案：给其父级元素定义z-index，有些情况下还需要定义 { position:relative;}
 
36、IE6最大最下宽高解决方案
       最小宽度      .min_width{ min-width:300px; _width:expression(document.body.clientWidth < 300 ? "300px" : "auto");}
       最大宽度      .max_width{ max-width:600px; _width:expression(document.body.clientWidth > 600 ? "600px" : "auto");}
       最小高度      .min_height{ min-height:200px; _height:expression(this.scrollHeight < 200 ? "200px" : "auto");}
       最大高度      .max_height{ max-height:400px; _height:expression(this.scrollHeight > 400 ? "400px" : "auto");}
       最大最小宽度  .min_and_max_width{ min-width:300px; max-width:600px; _width: expression(document.body.clientWidth < 300 ? "300px":(document.body.clientWidth > 600 ? "600px" : "auto"));}
       最大最小高度  .min_and_max_height{ min-height:200px; max-height:400px; _height: expression(this.scrollHeight < 200 ? "200px" : (this.scrollHeight > 400 ? "400px" : "auto"));}   

37、去掉IE超链接的虚线框  解决方案：a{ outline:none; blr:expression(this.onFocus=this.blur());}

38、去除IE10+浏览器文本框后面的小叉叉         解决方案：input::-ms-clear{ display:none;}

39、禁止多行文本框textarea拖拽      解决方案: textarea{ resize:none;}

40、CSS3线性渐变：background: linear-gradient(direction, color-stop1, color-stop2, ...);
       CSS3径向渐变：background: radial-gradient(center, shape size, start-color, ..., last-color);