您的位置：首页 > 其它

一些ie BUG总结

2011-09-03 17:27 459 查看

最近几天试着写一个企业站，因为觉得这也企业cms系统比较简单。

从模块功能分析，到photoshop原型建立制图，再到美工美化，完成PS切图和xhtml页面。

后面接下来是用一个简单asp的cms系统核心代码（函数库，数据库处理类）进行二次开发。

不过现在要讲得时xhtml页面制作时候，要做到兼容ie6，就整整写了一天。真是汗！！！

1.浮动中padding-bottom失效，需要清除浮动

<style type="text/css">
.clear{     background: none;
border: 0;
clear: both;
display: block;
float: none;
font-size: 0;
margin: 0;
padding: 0;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
zoom:1;}
#link ul{overflow:hidden;/*解决溢出问题*/}
#link ul li{float:left;display:inline;}
#link ul li a{float:left; display:block; overflow:hidden;/*防止图片太大溢出*/ width:153px;}
#link ul li a img{border:1px solid #eee;padding:2px;}
</style>
<ul>
<li><a href="#"><img src="1.jpg" /><a></li>
<li><a href="#"><img src="1.jpg" /><a></li>
<li><a href="#"><img src="1.jpg" /><a></li>
<li><a href="#"><img src="1.jpg" /><a></li>
<li class="clear"></li><!--加入清除浮动-->
</ul>

2.导航中margin-left负值时不起作用，a标签无法遮住父元素上个同级li。因此应当提高a的zoom和设置position元素。

<style>
/*导航栏*/
#nav{ background:url(../images/nav.gif) repeat-x; height:43px; line-height:43px}
#nav ul{ overflow:hidden}
#nav ul li{float:left; background:url(../images/nav-li-span.gif) no-repeat right; display:inline}
#nav ul li a{ display:block; width:78px; text-align:center; color:#fff; font-family:"微软雅黑","Trebuchet MS", Arial,

Helvetica, sans-serif; font-size:14px; margin-left:-2px;

position:relative; zoom:1 /*提高了a的层级*/}
#nav ul li a:hover,#nav ul li a.on{text-decoration:none; background:url(../images/li_on.gif) no-repeat center center;

color:#fff8cd;}
.text-l{text-align:left}
.text-c{ text-align:center}
.text-r{ text-align:right}
.main{ width:960px;margin:0 auto}
</style>
<div id="nav" class="text-c">
<ul class="text-l main">
<li> </li>
<li><a href="index.html" class="on">首页</a></li>
<li><a href="product.html">产品业务</a></li>
<li><a href="news.html">新闻中心</a></li>
<li><a href="support.html">技术支持</a></li>
<li><a href="about.html">关于我们</a></li>
</ul>
</div>

3. ie下li里面div使用float出现3px间距问题
给li中的浮动元素设置vertical-align:top|middle|bottom

<style type="text/css">
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big,

cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul,

fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
}
body{
font: 12px/1.5em "宋体", Arial, Helvetica, sans-serif;  color:#333;
}
html,body{height:100%; width:100%}
img{border:0}
.clear{     background: none;
border: 0;
clear: both;
display: block;
float: none;
font-size: 0;
margin: 0;
padding: 0;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
zoom:1;}
ul{list-style:none}
.new-list{background:#fff;margin:10px auto; overflow:hidden; border:1px solid #dedede; padding:10px}
.new-list-lft{float:left; width:270px;}
.new-list-rgt{float:right; width:270px; padding-left:4px}
.new-list ul{ margin:0; padding:0}
.new-list li{padding:5px 0 5px 16px;overflow:hidden; background:#eee}
.new-list li a{float:left; vertical-align:middle}
.new-list li span{ float:right; vertical-align:middle}

.dash{ border-bottom:1px dashed #ccc}
</style>
</head>
<body>
<div class="new-list">
<ul class="new-list-lft">
<li class="dash"><a href="#">第八届农牧畜大会</a><span>2011-08-30</span></li>
<li class="dash"><a href="#">第八届农牧畜大会</a><span>2011-08-30</span></li>
<li class="dash"><a href="#">第八届农牧畜大会</a><span>2011-08-30</span></li>
<li class="dash"><a href="#">第八届农牧畜大会</a><span>2011-08-30</span></li>
<li><a href="#">第八届农牧畜大会</a><span>2011-08-30</span></li>
</ul>
<ul class="new-list-rgt">
<li class="dash"><a href="#">第八届农牧畜大会</a><span>2011-08-30</span></li>
<li class="dash"><a href="#">第八届农牧畜大会</a><span>2011-08-30</span></li>
<li class="dash"><a href="#">第八届农牧畜大会</a><span>2011-08-30</span></li>
<li class="dash"><a href="#">第八届农牧畜大会</a><span>2011-08-30</span></li>
<li><a href="#">第八届农牧畜大会</a><span>2011-08-30</span></li>
</ul>
<ul class="clear">
</ul>
</div>
</body>

4.ie6中浮动元素自增加margin-bottom，用ie开发工具查看，完全看不出来，真得是一头雾水，浮动元素自增加margin-bottom后撑开了父级元素的高度。
解决方法：父元素添加zoom:1;

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航