三列内容用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者显示都正常.

posted on 2007-02-01 22:03  Gardener  阅读(787)  评论(0编辑  收藏  举报