订阅汇聚素材网Feed

IE6、IE7下文字溢出

神奇的IE浏览器,神奇是IE6\IE7啊
关于IE6\IE7下内容元素有相对定位:position: relative;,在IE6和IE7下隐藏溢出overflow:hidden;失效,万恶的IE啊。

先看代码:

CSS部分:

#wrap {
width: 1000px;
height: 500px;
margin: 0 auto;
border: 1px solid red;
overflow: hidden;
}
#box {
width: 100px;
height: 30px;
background: #EEE;
position: relative;
}
#inner{
width: 50px;
height: 15px;
position: absolute;
left: -10px;
top: 0px;
background: red;
z-index: 12;
}

HTML部分:

<div id=”wrap”>
<div id=”box”>
<div id=”inner”></div>
</div>
</div>

在IE6和IE7下面可以看到,#inner层可以溢出,#wrap层明明设置了overflow:hidden;
写CSS是没有多少理论可以说得明白这是什么回事,工作那么久以来,发现各浏览器都慢慢都有各自的标准。
可怜我们这些前端工程师,而且还被很多人认为做前端是一件容易事。
那么又有前端或后端程序员能说得明白上面的问题呢。
多余的话不说太多了,先说这个问题如何解决。
给#wrap层也加上一个position:relative;问题就可以解决了。

 

坑爹的万恶无法解释IE6\IE7的BUG。

13 人Likes
  

文章转载请注明:IE6、IE7下文字溢出-汇聚素材网

本文固定链接:http://www.webhj.com/hj-321.html  +复制链接

目前共有 1 条留言 【 访客:1 条, 博主:0 条 】 访客以 1:0 暂时领先博主!

  1. 沙发
    china  

    IE6、IE7下文字溢出-汇聚素材网

    2013 年 9 月 26 日 上午 8:22 @回复

发表评论

*

*

9 + 6

快捷键:Ctrl+Enter
0全站搜索 1 设计 2 素材 3 教材 4 WEB 5 电子书籍