【IE6的疯狂之六】li在IE中底部3像素的BUG(增加浮动解决问题)
2011-04-28 15:34
513 查看
今天开发项目中碰到一个li在IE中的BUG,先来看设计原型(如图:)
两个红色中间是<li>1px的底边框;
我写的代码如下:
=============================================================
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>无标题文档</title>
<style type=”text/css”>
<!–
body,dl,dt,dd,ul,ol,li,pre,form,fieldset,input,p,blockquote,th,td,h1,h2,h3,h4,h4,h5{margin:0;padding:0}
body{font:400 12px/150% Tahoma,SimSun,Arial;color:#333;background-color:#FFFFFF}
select{font-size:12px}
ul,li{list-style:none}
img{border:none}
ul{ border-bottom:#FDD496 2px solid;border-top:#FDD496 2px solid; height:263px}
ul li{ height:43px; border-bottom:#DCDCDC 1px solid; }
.po-txt{ float:left; width:146px; height:31px; background-color:#f00; padding:12px 0 0; font-size:14px; font-weight:700; text-align:right}
–>
</style></head>
<body>
<ul>
<li>
<div class=”po-txt”>通行证:</div>
</li>
<li>
<div class=”po-txt”>昵称:</div>
</li>
</ul>
</body>
</html>
=================================================================
在IE6,IE7下显示为(如图):貌似<li>多了个 margin-bottom:3px;
几经周折,找到了Qzone的鬼哥帮忙解决,他说在<li>上加float:left;
问题解决了,当然根据设计稿的精神还要加个width:100%;
完整的样式如下:
=====================================================
<style type=”text/css”>
<!–
body,dl,dt,dd,ul,ol,li,pre,form,fieldset,input,p,blockquote,th,td,h1,h2,h3,h4,h4,h5{margin:0;padding:0}
body{font:400 12px/150% Tahoma,SimSun,Arial;color:#333;background-color:#FFFFFF}
select{font-size:12px}
ul,li{list-style:none}
img{border:none}
ul{ border-bottom:#FDD496 2px solid;border-top:#FDD496 2px solid; height:263px}
ul li{ height:43px; border-bottom:#DCDCDC 1px solid; float:left; width:100%;}
.po-txt{ float:left; width:146px; height:31px; background-color:#f00; padding:12px 0 0; font-size:14px; font-weight:700; text-align:right}
–>
</style>
======================================================
以前我们老是研究清除浮动,想不到今天却用增加浮动来解决问题。呵呵。
特别感谢Qzone的鬼哥!
两个红色中间是<li>1px的底边框;
我写的代码如下:
=============================================================
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>无标题文档</title>
<style type=”text/css”>
<!–
body,dl,dt,dd,ul,ol,li,pre,form,fieldset,input,p,blockquote,th,td,h1,h2,h3,h4,h4,h5{margin:0;padding:0}
body{font:400 12px/150% Tahoma,SimSun,Arial;color:#333;background-color:#FFFFFF}
select{font-size:12px}
ul,li{list-style:none}
img{border:none}
ul{ border-bottom:#FDD496 2px solid;border-top:#FDD496 2px solid; height:263px}
ul li{ height:43px; border-bottom:#DCDCDC 1px solid; }
.po-txt{ float:left; width:146px; height:31px; background-color:#f00; padding:12px 0 0; font-size:14px; font-weight:700; text-align:right}
–>
</style></head>
<body>
<ul>
<li>
<div class=”po-txt”>通行证:</div>
</li>
<li>
<div class=”po-txt”>昵称:</div>
</li>
</ul>
</body>
</html>
=================================================================
在IE6,IE7下显示为(如图):貌似<li>多了个 margin-bottom:3px;
几经周折,找到了Qzone的鬼哥帮忙解决,他说在<li>上加float:left;
问题解决了,当然根据设计稿的精神还要加个width:100%;
完整的样式如下:
=====================================================
<style type=”text/css”>
<!–
body,dl,dt,dd,ul,ol,li,pre,form,fieldset,input,p,blockquote,th,td,h1,h2,h3,h4,h4,h5{margin:0;padding:0}
body{font:400 12px/150% Tahoma,SimSun,Arial;color:#333;background-color:#FFFFFF}
select{font-size:12px}
ul,li{list-style:none}
img{border:none}
ul{ border-bottom:#FDD496 2px solid;border-top:#FDD496 2px solid; height:263px}
ul li{ height:43px; border-bottom:#DCDCDC 1px solid; float:left; width:100%;}
.po-txt{ float:left; width:146px; height:31px; background-color:#f00; padding:12px 0 0; font-size:14px; font-weight:700; text-align:right}
–>
</style>
======================================================
以前我们老是研究清除浮动,想不到今天却用增加浮动来解决问题。呵呵。
特别感谢Qzone的鬼哥!
相关文章推荐
- 【IE6的疯狂之六】li在IE中底部3像素的BUG(增加浮动解决问题)
- 【IE6的疯狂之九】li在IE中底部空行的BUG
- 【IE6的疯狂之九】li在IE中底部空行的BUG
- 【IE6的疯狂之九】li在IE中底部空行的BUG
- IE6 | IE7 li底部多出几像素bug
- 解决ie6下3像素bug问题
- 解决ie6下li左浮动文字换行的问题
- li内有div浮动时,li出现4px间距,IE bug的解决方法
- IE6 两个div有间隙的问题(IE 3px bug)解决方法
- 解决IE6,ie7下元素左浮动自动换行的问题
- 解决IE6浮动元素产生的“双边距”BUG问题及解决办法
- 解决ie6下li左浮动文字换行的问题
- li margin-bottom在IE6,7中底部3像素的BUG
- ie6/7下 li内浮动元素下边距4像素bug解决方案
- 完美解决浮动IE6 7中的兼容性BUG问题
- 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
- ie6,ie7,ie8 ie的还原问题解决办法
- IE6、IE7、IE8、IE9兼容性问题解决办法
- 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
- 浏览器兼容性经典问题(二) IE6 3像素bug问题