bug集合令

/*温馨提示：若觉得黑白的反差“亮瞎眼”，可适当调低屏幕亮度~*/

　　总结，总结，总结......并非完全版，欢迎各种补充啊~

　　1.IE6下的躲猫猫（Peekaboo Bug）

　　　　描述：在IE6下，当同一容器中，同时有浮动，非浮动，清除浮动元素且非浮动元素处于浮动与清除浮动元素之间，父容器设置了背景，在未改变背景状态时，非浮动元素内容是被隐藏起来的，就好像内容躲在父容器的背景下一样，当鼠标按住在应该显示内容的地方滑动或拖动滚动条时才显示内容。

　　　　解决方案：1.不给父容器加背景

　　　　　　　　　2.保持float与clear属性的元素相邻

　　　　　　　　　3.给父容器明确的高度/宽度，通常设置  _height:1%;

　　　　　　　　　4.父容器与浮动元素都设置position:relative;

 

---

　　2.IE6小的双边距bug

　　　　描述：在IE6下，块元素浮动并设置了横向margin时，表现出来的margin值为正常值的两倍。

　　　　解决方案：将块元素设置为内联元素 display:inline;

 

---

　　3.IE6下的最小高度问题

　　　　描述：在IE6下，默认的最小高度为19px，当设置元素高度小于19px时，高度显示为19px。

　　　　解决方案：1.设置font-size:0; 但该方法有局限性，在高度小于2px时，高度显示值为2px；

　　　　　　　　　2.设置overflow:hidden; 完美解决该bug

 

---

　　4.IE6,7下的浮动3px bug

　　　　描述：在IE6,7下，为了是块级元素同行显示，我们会设置其中一个元素为浮动元素，但此时浮动元素与非浮动元素之间会多出大约3px的间距，在li元素中，还好导致同行元素折行。

　　　　解决方案：给要同行显示的元素都加浮动属性

 

---

　　5.IE6,7下li的间隙问题

　　　　描述：在IE6,7下，li元素本身无浮动，内容浮动时，li元素下会出现几像素边距。

　　　　解决方案：1.给li加float加浮动并设置宽，同时给ul清浮动（比较麻烦的方法）

　　　　　　　　　2.给li元素设置vertical-align属性，一般设置为 vertical-align:top;

 

---

　　6.图片下方出现的几px像素

　　　　描述：用图片撑开div是时可以发现图像下方多出几px的空白。

　　　　解决方案：1.设置 display:block; 但此时图像会独占一行

　　　　　　　　　2.给图像设置 vertical-align:top;

 

---

 　　7.margin collapse（margin重叠）

　　　　详细描述与解决方案见[CSS小结]~

 

---

　　8.IE6下相对定位容器中的绝对定位元素

　　　　描述：在IE6下，设置了相对定位属性的容器，容器中的绝对定位元素定义的left与bottom会有异常，如果相对定位容器内没有内容撑开时，绝对定位的元素会消失。

　　　　解决方案：此时可以为相对定位的元素设置相关属性触发haslayout属性，eg._zoom:1; 或_height:1%;

 

---

　　9.IE6下奇数宽bug

　　　　描述：在IE6下，设置了相对定位属性的容器，容器中的绝对定位元素在定义了right为0时，若此时的父容器宽度为奇数时，绝对定位元素会在右边出现几像素的空隙，奇葩的是，若绝对定位元素是定义left为0时就不会出现空隙。

　　　　解决方案：将相对定位的父级宽度设为偶数。

 

---

　　10.IE6下加链接的图片

　　　　描述：当我为图片外加链接标签时，在IE6下图片会出现链接边框

　　　　解决方案：给全部图片去边  img{ border:none; }

 

---

　　11.IE8下th继承失效

　　　　描述：在网页设计中，常常会利用到一些样式的继承性，表格标签th本该继承table的text-align，但在IE8下，继承失效。

　　　　解决方案：显式的为th设置继承  text-align: inherit;

　　　　　　　　   直接设置th应有的text-align属性；

 

---

　　12.IE6,7下inline-block失效

　　　　描述：在IE6，7对元素设置inline-block属性会没效果。

　　　　解决方案：对于内联元素，触发haslayout属性后，其表现与inline-block类似；

　　　　　　　　　对于块状元素，触发haslayout，并设置display:inline;属性后，其表现与inline-block类似；

 

---

　　13.IE6下浮动元素中注释太多导致出现重复字符

　　　　描述：浮动元素之间有注释，且最后一个元素有文本时，文字会重复，注释个数越多，重复字数越多。

　　　　解决方案：将最后一个浮动元素的右外边距设为-3px；

　　　　　　　　　将父容器的宽度加宽3px；

 

欢迎补充~~

转载于:https://www.cnblogs.com/pada/p/3643052.html