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

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

html块状元素和内联元素_HTML中的内联元素和块元素-解释
html块状元素和内联元素块和内联元素 (Block and Inline Elements) Let's understand block and inline elements using th ...
html中内联元素排列对齐原理,html标签中的内联元素（行内元素）详解
html内联元素,也叫行内元素,相邻的多个内联元素是水平横向排列显示在同一行,其宽度随内容的变化而变化,在同一行显示多个内容,就可以使用内联元素来实现,这样就不需要将块级元素设置为浮动或绝对定位也能在 ...
CSS 中的内联元素、块级元素以及display的各个属性的特点
1. display:block 1.1 block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度 1.2 block元素可以设置width,he ...
js批量向html容器内的元素赋值
/** 向元素赋值(元素id要与对象属性名相同)* selector : "#table span"* jsonData: {"key":"value ...
iOS微信小程序border边框上下不显示的问题
在微信开发者工具正常,但是真机调试ios边框上半部分直接隐掉了 1.因为数据是for循环出来的,导致每搁一个数据就显示异常一个 2.没有定义宽高,完全是padding给撑起来的 3.修改样式之后,发现 ...
border边框部分不显示
效果如下 <div class="session-title">健康概况</div> <div class='session-con'>< ...
块元素与内联元素的盒子模型、浮动
目录 1.盒子模型 2.盒子模型的边框 3.盒子模型的内边距 4.盒子模型的外边距 5. 垂直外边距的重叠 6.清除浏览器默认内外边距 7.内联元素的盒子 8.dispaly详解 9.overflow ...
怎么区分html外联内联,HTML中什么是内联元素？
在HTML中,内联元素是指display属性为inline的元素:内联元素也叫行内元素,在网页中总是随着文字流出现在"行内",这些元素不会在它本身之前或之后生成"分隔符& ...
html 内联元素转换,HTML中什么是内联元素？
在HTML中,内联元素是指display属性为inline的元素:内联元素也叫行内元素,在网页中总是随着文字流出现在"行内",这些元素不会在它本身之前或之后生成"分隔符& ...

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

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

最新文章

热门文章