css学习笔记之兼容&bug（吐血整理）

学习来源：
http://www.cnblogs.com/xiaohuochai/ http://blog.csdn.net/secsky/article/details/8425666 http://www.51itstudy.com/31686.html https://www.zhihu.com/people/efanchy


兼容：

【1】IE6/IE7下给块级元素设置inline-block样式
原因：IE中对inline元素使用display:inline-block，也是不识别的，但使用display:inline-block在IE下会触发layout，从而使inline元素可以支持宽高，才会有display:inline-block属性的表征。但是对块元素设置display:inline-block属性，块元素仅仅是被display:inline-block触发了layout，而它本身就是行布局，所以触发后，块元素依然还是行布局。

解决方法：
1）先使用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象（两个display 要先后放在两个CSS声明中才有效果，这是IE的一个经典bug，如果先定义了display:inline-block，然后再将display设回 inline或block，layout不会消失）。代码如下：

div {display:inline-block;...} 

div {display:inline;}
2）【推荐】直接让块元素设置为inline对象呈递（设置属性*display:inline;），让块元素排成一行；*zoom:1的作用是触

发hasLayout，能够支持设置宽、高、line-height等一系列属性。代码如下：

div { display:inline-block;           /*为了现代浏览器 +IE6、7 inline 元素支持*/

       *display:inline; *zoom:1; }   /*为了IE6/IE7支持*/



【2】去除 inline-block 空隙（换行被解析成空格）

原因：产生 inline-block 空隙的根本性原因是：HTML 中的换行符、空格符、制表符等合并为空白符，字体大小不为 0 的情况下，

空白符自然占据一定的宽度，因此产生了元素间的空隙。

解决方法：

1）删除换行符后，inline / inline-block元素间的空隙就消失了。

此方法牺牲结构来兼容表现，不建议。

2）【推荐】HTML 中的换行符、空格符、制表符等产生了空白符，而这些归根结底都是字符，它们的大小都是受font-size 控制

的，inline-block 元素间的空隙并不是固定大小的。

font-size设为0，可以解决大多数浏览器，除了IE6/IE7，IE6/7 inline 元素 inline-block 后设置 font-size:0 始终有 1px 的空隙，借

助word-spacing（检索或设置对象中的单词之间插入的空隔）代码如下：

父级元素 { font-size：0；                           /* 所有浏览器 */ 

              *word-spacing: -1px; }                 /* IE6、7 */ 

   

inline-block元素 { font-size: 12px;               /*子元素的字符和单词间距我们也要把它重置为默认值。*/

                          letter-spacing: normal; 

                          word-spacing: normal;  }

注意：IE6/7IE6、7 block 元素设置成inline-block并不会产生空隙。

原因：根据【1】设置是要靠 IE 的 hasLayout，触发 hasLayout 的元素表现出来的特征是一个独立的矩形容器，可以设置宽高而

不受外部元素的影响，类似于现代浏览器中的 BFC（块级格式化上下文）的概念具有独立性，所以产生 hasLayout 的元素之间表

现出来互不影响，这也表明 IE6/7 中的 inline-block 不能等同于 CSS2.1 中的 inline-block。如果非要说是有 bug， IE6、7 block 

元素 inline-block 后不产生空隙才是 bug。

【3】透明度兼容写法

filter: Alpha(opacity=10);   （0~100）  /* IE */   

opacity:0.1;                      （0~1）      /*现代浏览器*/

bug：

【1】双外边距浮动

出现条件：块元素有浮动，有和浮动的方向一致的margin。

解决方法：display:inline

.box { margin-left: 10px;  

         float:left;  

         display:inline; }

【2】div中嵌套img，底部有留白

原因：img是inline元素，inline元素默认 vertical-align: baseline ，（文字的基线是从图片底部开始算起的），即图片的下边缘是

与容器的基线对齐，而不是紧贴容器下边缘。而baseline与bottom之间是有一段距离的，留白就是这段距离。

解决方法：

1）当div中有文字时，设置img { vertical-align: bottom；}

将图片下边缘与line box的底端对齐，自然就去掉留白了。

2）有设置line-height时，div { line-height: 0; }

因为top和bottom之间的距离为line-height，line-height为0，则baseline和bottom之间的距离也为0了。

3）没有设置line-height，且无文字时，div { font-size: 0; }

因为line-height默认值是基于font-size的。

4）img { display：block; }

vertical-align只对inline元素有效，变成块元素就不存在基线对齐的说法了。

【3】子元素的margin-top，margin-bottom值会传递给父级

原因：

相邻元素叠加：这个比较好理解， 相邻的两个元素， 如果它们的上下边距相遇，即会产生叠加。

父子元素叠加：包含元素的外边距隔着父元素的内边距和边框， 当这两项都不存在的时候， 父子元素垂直外边距相邻， 产生叠加。 

注意：只有普通流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

解决方法：

1）重叠问题，只要让它们不在同一个 BFC 内就行。

对于相邻元素，只要给它们加上 BFC 的外壳，就能使它们的 margin 不重叠；

对于嵌套元素，只要让父级元素触发 BFC，就能使父级 margin 和当前元素的 margin 不重叠。

触发BFC的方式 float（除了none）、overflow（除了visible）、display（table-cell/table-caption/inline

-block）、position（除了static/relative）

IE6下触发haslayout  *zoom：1;

如下：可在.container { overflow: hidden;  *zoom: 1; }   支持IE6



2）或是只用上或只用下边距，这样就不存在叠加的机会

【4】在IE6下元素的高度的小于19px的时候，会被当做19px来处理

解决方法：

1）font-size: 0;

div { height: 1px;

        font-size: 0；

     }

此方法在IE6下，最小到2px，不会为0。

2）【推荐】overflow: hidden;

div { height: 1px;

       overflow: hidden; 

      }

超过height 1px的部分会被隐藏掉。

【5】IE5/6 下浮动元素与非浮动元素在一起，会发生3px偏移（包括文本和图片）

解决方法：加负3px外边距

.floatBox { float: left;  

               *margin-right: -3px; } 

往右浮动，则用margin-left。

【6】IE6下出现重复字符(文字溢出) 

出现条件：子元素的宽度和父级的宽度相差小于3px 或是 两个浮动元素中间有注释或者内嵌元素的时候，溢出文字的字数=注释/内

联的条数*2-1

解决办法：将溢出文字所在文字区块包含在新的<div></div>之间。

【7】在IE6/7下，li本身没浮动，但是li的内容有浮动，li与li之间会产生一个间隙

解决办法：

1）给li加浮动

2）给li加vertical-align: top;

注意：当与19px最小高度bug并存时，采用1）方法加上最小高度的解决方法。

【8】在IE6/7下，子元素有相对定位的话，且范围比父级大，父级的overflow包不住子元素。

解决方法：

给父级也加定位 position: relative / absolute;

【9】在IE6，7下输入类型的表单控件输入文字的时候，其背景图片会跟着一块移动 。

解决办法： 

在input外包一层div，把图片背景加给父级div，自身去除boder和background，大小和div一样。

【10】在IE6下，元素负margin超出父元素的部分会被隐藏掉。

解决方法：

这个问题可以通过设置margin负值元素的position属性值为relative来解决。



未完待续。。。