三列内容用ul控制时IE与Firefox不同显示解决
HTML代码:
<div class="showinfo">
<div class="board">MGS3.0论坛上统计信息</div>
<div class="plus">
<div>
<ul>
<li>当前在线人数:<span>261人</span></li>
<li>论坛帖子:<span>67283主题,873109回复</span></li>
<li>注册会员:<span>178232人</span></li>
<li>欢迎新加入的会员:<span>新来的New Comer</span>
</ul>
<ul>
<li>您的浏览器版本:<span>Firefox 1.5.0</span></li>
<li>操作系统:<span>NT 5.2</span></li>
<li>IP地址:<span>192.168.0.255</span></li>
</ul>
<ul>
<li>您总共发贴:<span>192</span></li>
<li>精华帖数:<span>38</span></li>
<li>被删贴数:<span>2</span></li>
</ul>
</div>
</div>
</div>
CSS代码:
.showinfo {
width: 766px;
margin:0px auto;
background: #EEE url(../images/board_sep.jpg) no-repeat center bottom;
border-top: 10px solid #FFF;
border-right: 2px solid #FFF;
border-bottom: 10px solid #FFF;
border-left: 2px solid #FFF;
color:#666;
}
.showinfo .board {
font-size: 14px;
font-weight: bold;
color: #669999;
height:20px;
padding-left:30px;
padding-top:5px;
background:#DDD;
}
.showinfo .plus div ul {
font-weight:bolder;
padding-left:10px;
margin-left:0px;
list-style: none;
float:left;
width:30%;
}
代码中红色的部分如果不加上去,是怎么也不可能让IE出现三列的,IE里UL部分会跑到右边去一点,好像自动padding-left多或者margin right去了.而FIREFOX里则不需要这一限制就可以实现.加上后2者显示都正常.