/*温馨提示:若觉得黑白的反差“亮瞎眼”,可适当调低屏幕亮度~*/
总结,总结,总结......并非完全版,欢迎各种补充啊~
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;
欢迎补充~~