ie7中overflow:auto失效的处理方式

日期:2021-03-03 类型:科技新闻 

关键词:自助建站,专业建站,建站网站,建站平台,网站在线制作app

造成缘故
当父元素的立即子元素或下级子元素的款式有着position:relative特性时,父元素的overflow:auto特性就会无效。

处理方法
处理这个bug很简易,在父元素中应用position:relative;便可处理该bug。

编码bug重现

拷贝编码
编码以下:

<ul>
<li>我是很勤奋的前端开发blog,期待你会喜爱</li>
<li>我是很勤奋的前端开发blog,期待你会喜爱</li>
<li>我是很勤奋的前端开发blog,期待你会喜爱</li>
<li>我是很勤奋的前端开发blog,期待你会喜爱</li>
<li>我是很勤奋的前端开发blog,期待你会喜爱</li>
</ul>


拷贝编码
编码以下:

ul{overflow:auto; height:100px;}
li{position:relative; height:30px; line-height:30px;}

在ie7中是会出現怪异bug,有翻转条出現,可是没法拉动翻转条。处理便是给ul{position:relative;}

IE7 float:right会换行
之前认为是ie6才会出現,想不到ie7也一样有这个bug,在网上许多说把float:right的元素放在最前面,这是有多么的2的念头啊。放弃1个元素的部位来处理这个bug,有时你自身看编码时都有点无语,处理方式能够给父层加1个相对性精准定位,随后给这个右侧加1个肯定精准定位来完成。我感觉这模样较为可靠点。

以上便是这篇文章内容的所有內容,期待对大伙儿的学习培训和工作中能有1定的协助。