常见的双倍边距类问题都遇到过,但很少遇到这种有意思的,所以记录一下。
这个BUG是发生在Standards模式下(就是包含XHTML或者HTML4.0的DOCTYPE时)
看这段代码
< !DOCTYPE>
ul {margin:0; padding:0;} li {list-style:none;} #test{overflow:auto;height:200px; widows:200px; border:1px solid #000;} #test li {position:relative;}
<div id="test">
<ul>
<li>测试</li>
<li>测试</li>
<li>测试</li>
<li>测试</li>
<li>测试</li>
<li>测试</li>
<li>测试</li>
<li>测试</li>
<li>测试</li>
<li>测试</li>
<li>测试</li>
<li>测试</li>
<li>测试</li>
<li>测试</li>
<li>测试</li>
<li>测试</li>
<li>测试</li>
<li>测试</li>
<li>测试</li>
<li>测试</li>
</ul>
</div>原本我认为溢出的文字会触发滚动条,但并没有呈现。
http://www.zhangjingwei.com/demo/overflow&position/demo_01.html
在IE6或者IE7内,溢出的文字呈现绝对定位(position:absolute)的形式。
解决方法:
在父级元素元素上设置属性position:relative
http://www.zhangjingwei.com/demo/overflow&position/demo_02.html
Asins
九月 2nd, 2009 @ 13:12
真的是个很怪的问题,li中使用了position:relative;然后父窗口使用了overflow:auto;加一高度就会有这种问题!
呵呵,万恶的IE啊,想也没想到啊。
回复
fox
九月 3rd, 2009 @ 10:59
这不是BUG。你看你的DEMO1页面 有BODY的开始标签么?
BODY里面的东西写在HEAD里。。width还写成widows。。
自己连HTML结构都没写明白还研究什么BUG。。。
汗一个。。围观中
回复
张经纬
九月 3rd, 2009 @ 11:42
@fox
没错,是写错了,我确实漏写,并写错了width,文章发表为了图块,直接复制粘贴的。wordpress的后台对code的输入并不是很好,必须要手工打
这样的符号。
但,这根本不影响我所要说的问题,即便把
去掉,为什么你可以去搜索下。如果你觉得这不是一个BUG,那么我可以告诉你,你错了,这是一个在IE6\IE7中存在的BUG,IE8修正了。
假如你不相信我的话,我觉得你可以看一下这个链接:
https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=364083
你不会认为微软的产品反馈与错误报告中状态为“关闭 (已修复)”的问题是错误的吧?
加上一句题外话,其实你围观是你的权利,不过你要是围观我,我就不由自主想起鲁迅先生笔下的人,原文怎么说的?伸着脖子,好像被人拎起来捏着脖子的鸭子?呵呵,你挺像的。
回复
fox
九月 3rd, 2009 @ 12:38
就你的DEMO而言 是体现不了这个BUG的。
你把你DEMO的WIDTH写对 把HEAD 和BODY写全。。
BUG在你DEMO里是体现不了的。。
回复
张经纬
九月 3rd, 2009 @ 13:05
@fox
是么?
回复
RobinQu
九月 9th, 2009 @ 19:21
这个不是bug……
offsetParent默认是body或html的
回复
张经纬 reply on 九月 10th, 2009 09:20:
offsetParent??你说的是DOM中的offsetParent属性么?我说的是CSS中的overflow,position属性。
回复