前端设计

当前位置/ 首页/ 前端设计/ 正文

css bug如何解决IE6及更早浏览器下未定义宽度的浮动或绝对定位元素会被内部设置了zoom


  如何解决IE6及更早浏览器下未定义宽度的浮动或绝对定位元素会被内部设置了zoom:1的块元素撑开的问题?

  BUG重现:

  #test{zoom:1;overflow:hidden;border:1px solid #ddd;background:#eee;}

  #test h1{float:left;}

  #test .nav{float:right;background:#aaa;}

  #test .nav ul{zoom:1;overflow:hidden;margin:0;padding:0;list-style:none;}

  #test .nav li{float:left;margin:0 5px;}

<div id="test">
<h1>Doyoe</h1>
<div class="nav">
<ul>
<li><a href="http://css.doyoe.com/">CSS参考手册</a></li>
<li><a href="http://blog.doyoe.com/">CSS探索之旅</a></li>
<li><a href="http://demo.doyoe.com/">web前端实验室</a></li>
</ul>
</div>
</div>

  如上代码,IE6及更早浏览器div.nav会被设置了zoom:1的ul给撑开。

  列举几个解决方法:

  设置ul为浮动元素;

  设置ul为inline元素;

  设置ul的width

相关热词搜索:css bug 浏览器 ie

分享到:

我要评论

微信订阅

打开微信,点击底部的“通讯录”,点击右上角的 “添加” 搜号码 andk_in 或查找公众号 莎龙 即可。