[b]1.3px偏移BUG[/b]
问题描述:浮动元素与非浮动元素相邻(包括横向和纵向的相邻),会产生3px偏移;
解决办法:方法一、添加float:left给非浮动元素,使其也浮动
方法二、使用过滤器*html #float{height:1%;},为浮动元素定义任意高度,迫使其拥有布局
[b]2.双倍margin边距[/b]
问题描述:浮动元素设置浮向margin边距属性时,其值会加倍;
解决办法:添加display:inline,设置内联元素显示。
3.空标签高度
问题描述:当该空标签的高度设置在19px以下时,其高度始终是19px;
解决办法:添加overflow:hidden,设置溢出隐藏。
[b]4.图片下方空隙[/b]
问题描述:所在区块内图片下方会有空隙;
解决办法:添加display:block,设置块元素显示。
[b]5.左右边距失效[/b]
问题描述:子元素设置左右边距失效;
解决办法:添加zoom:1等,激发父元素的layout;
[b] 6.相对位置和文字溢出[/b]
问题描述:父元素设置overflow:hidden,子元素设置position:relative,子元素溢出;
解决办法:方法一、不放置注释;
方法二、注释不要放置于2个浮动的区块之间;
方法三、将文字区块包含在新的<div></div>之间;
方法四、去除文字区块的固定宽度;
方法五、在后面加一个<br />或者空格;(不推荐);
方法六、使用IE注释格式,如:<!–[if !IE]>Put your commentary in here…<![endif]–>
方法七、添加position:relative给父元素。
[b]7.最小高度[/b]
问题描述:IE忽略min-height属性,它认为height就是最小高度;
解决办法:使用ie6不支持但其余浏览器支持的属性!important。
[b]8.PNG图片透明[/b]
问题描述:IE支持100%透明的PNG,IE6只是不支持png的Alpha透明
解决办法:img { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...); }
[b]9.图像缩放[/b]
问题描述:IE缩放效果
解决办法:img { -ms-interpolation-mode: bicubic; }
[b]10.盒模型Hack[/b]
问题描述:基于w3c标准,元素总宽度应该是总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right。但是,IE计算宽度时没有加上填充和边框:总宽度 = margin-left + width + margin-right
解决办法:使用w3c的标准兼容模式,IE6或者之后的版本能基于w3c的标准计算
[b]11.div遮盖select[/b]
问题描述:IE6以及以下版本,选择框Select会覆盖Div中的内容
解决办法:在Div内容中加入不显示的Iframe框架
[b]12.中文注释后样式失效[/b]
问题描述:如果css有中文注释,css为ANSI编码,html为utf-8编码,注释下面的样式不起作用
解决办法:统一css 和 html 的编码
问题描述:浮动元素与非浮动元素相邻(包括横向和纵向的相邻),会产生3px偏移;
解决办法:方法一、添加float:left给非浮动元素,使其也浮动
方法二、使用过滤器*html #float{height:1%;},为浮动元素定义任意高度,迫使其拥有布局
[b]2.双倍margin边距[/b]
问题描述:浮动元素设置浮向margin边距属性时,其值会加倍;
解决办法:添加display:inline,设置内联元素显示。
3.空标签高度
问题描述:当该空标签的高度设置在19px以下时,其高度始终是19px;
解决办法:添加overflow:hidden,设置溢出隐藏。
[b]4.图片下方空隙[/b]
问题描述:所在区块内图片下方会有空隙;
解决办法:添加display:block,设置块元素显示。
[b]5.左右边距失效[/b]
问题描述:子元素设置左右边距失效;
解决办法:添加zoom:1等,激发父元素的layout;
[b] 6.相对位置和文字溢出[/b]
问题描述:父元素设置overflow:hidden,子元素设置position:relative,子元素溢出;
解决办法:方法一、不放置注释;
方法二、注释不要放置于2个浮动的区块之间;
方法三、将文字区块包含在新的<div></div>之间;
方法四、去除文字区块的固定宽度;
方法五、在后面加一个<br />或者空格;(不推荐);
方法六、使用IE注释格式,如:<!–[if !IE]>Put your commentary in here…<![endif]–>
方法七、添加position:relative给父元素。
[b]7.最小高度[/b]
问题描述:IE忽略min-height属性,它认为height就是最小高度;
解决办法:使用ie6不支持但其余浏览器支持的属性!important。
[b]8.PNG图片透明[/b]
问题描述:IE支持100%透明的PNG,IE6只是不支持png的Alpha透明
解决办法:img { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...); }
[b]9.图像缩放[/b]
问题描述:IE缩放效果
解决办法:img { -ms-interpolation-mode: bicubic; }
[b]10.盒模型Hack[/b]
问题描述:基于w3c标准,元素总宽度应该是总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right。但是,IE计算宽度时没有加上填充和边框:总宽度 = margin-left + width + margin-right
解决办法:使用w3c的标准兼容模式,IE6或者之后的版本能基于w3c的标准计算
[b]11.div遮盖select[/b]
问题描述:IE6以及以下版本,选择框Select会覆盖Div中的内容
解决办法:在Div内容中加入不显示的Iframe框架
[b]12.中文注释后样式失效[/b]
问题描述:如果css有中文注释,css为ANSI编码,html为utf-8编码,注释下面的样式不起作用
解决办法:统一css 和 html 的编码