ie6中容器内浮动元素的border边框不完全显示的bug

ie6中容器内浮动元素的border边框不完全显示的bug

html

<div class="hrListBox">
        <div class="hrTitle">
            <div class="hrName"><span class="hrNamet">职位名称</span></div>
            <div class="hrNum"><span class="hrNumt">招聘人数</span></div>
            <div class="hrDate"><span class="hrDatet">开始时间</span></div>
            <div class="hrDate"><span class="hrDatet">结束时间</span></div>
            <div class="hrClick"><span class="hrClickt">点击查看</span></div>
        </div>
                <div class="hrItem">
            <div class="hrName"><h3 class="hrNameBox">电子商务专员</h3></div>
            <div class="hrNum"><span class="hrNumBox">12</span></div>
            <div class="hrDate"><span class="hrDateBox">2010-10-11</span></div>
            <div class="hrDate"><span class="hrDateBox">2010-10-26</span></div>
            <div class="hrClick"><span class="hrClickBox"><a href="/hr/148595.html">点击查看</a></span></div>
        </div>
                <div class="hrItem">
            <div class="hrName"><h3 class="hrNameBox">php研发人员</h3></div>
            <div class="hrNum"><span class="hrNumBox">12</span></div>
            <div class="hrDate"><span class="hrDateBox">2010-10-11</span></div>
            <div class="hrDate"><span class="hrDateBox">2010-10-26</span></div>
            <div class="hrClick"><span class="hrClickBox"><a href="/hr/151347.html">点击查看</a></span></div>
        </div>
                <div class="hrItem">
            <div class="hrName"><h3 class="hrNameBox">美工</h3></div>
            <div class="hrNum"><span class="hrNumBox">12</span></div>
            <div class="hrDate"><span class="hrDateBox">2010-10-11</span></div>
            <div class="hrDate"><span class="hrDateBox">2010-10-26</span></div>
            <div class="hrClick"><span class="hrClickBox"><a href="/hr/151348.html">点击查看</a></span></div>
        </div>
                <div class="hrItem">
            <div class="hrName"><h3 class="hrNameBox">前端</h3></div>
            <div class="hrNum"><span class="hrNumBox">12</span></div>
            <div class="hrDate"><span class="hrDateBox">2010-10-11</span></div>
            <div class="hrDate"><span class="hrDateBox">2010-10-26</span></div>
            <div class="hrClick"><span class="hrClickBox"><a href="/hr/151349.html">点击查看</a></span></div>
        </div>
            </div>

css

.hrListBox{width:760px; border:1px solid #dedbde; margin:10px auto; overflow:hidden;}
.hrTitle{ border-bottom:1px solid #dedbde; height:38px;background: url(job.jpg) repeat-x  0 0 ;font-weight: bold;text-align: center; line-height:38px;}
.hrName,.hrNum,.hrDate{ float:left; border-right:1px solid #dedbde; padding-left:7px; height:38px; line-height:38px; }
.hrName{ width:180px; }
.hrNum{ width:147px; }
.hrDate{ width:123px;}
.hrClick{ width:123px; float:left; height:38px; line-height:38px;}
.hrItem{ border-bottom:1px solid #dedbde; height:38px;text-align: center; line-height:38px;  }
.hrClickBox a { display:block; background:url(look.jpg) no-repeat 0 0 ;text-indent:-99999px; width:81px; height:21px; margin-top:10px; margin-left:20px; }

在标准的浏览器中显示

在ie6中显示

解决办法在父元素中加上overflow:hidden;

.hrItem{ border-bottom:1px solid #dedbde; height:38px;text-align: center; line-height:38px; overflow:hidden; }

清除一下解决了这个bug