Overflow Auto && Position Relative

作者：张经纬来源：张经纬blog 时间：2009-09-03 12:02:00　

常见的双倍边距类问题都遇到过，但很少遇到这种有意思的，所以记录一下。

这个BUG是发生在Standards模式下（就是包含XHTML或者HTML4.0的DOCTYPE时）

看这段代码

< !DOCTYPE><style type="text/css">ul {margin:0; padding:0;}li {list-style:none;}#test{overflow:auto;height:200px; widows:200px; border:1px solid #000;}#test li {position:relative;}</style><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>

原本我认为溢出的文字会触发滚动条，但并没有呈现。

在IE6或者IE7内，溢出的文字呈现绝对定位（position:absolute）的形式。

解决方法：
在父级元素元素上设置属性position:relative

<!DOCTYPE><html><head><title>Overflow Auto && Position Relative</title><style type="text/css">ul {margin:0; padding:0;}li {list-style:none;}#test{overflow:auto;height:200px; widows:200px; border:1px solid #000;position:relative;}#test li {position:relative;}</style><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></body></html>

来源：http://www.mt-olympus.com/emmett/bug_overflow_positionrelative.php

标签：溢出,overflow,BUG

投稿

Overflow Auto && Position Relative

猜你喜欢

MySQL如何统计一个数据库所有表的数据量

Python常见工厂函数用法示例

Python np.where()的详解以及代码应用

python中hasattr()、getattr()、setattr()函数的使用

Python之批量创建文件的实例讲解

Python Pandas两个表格内容模糊匹配的实现

树莓派实现移动拍照

基于display:table的CSS布局

Django def clean()函数对表单中的数据进行验证操作

Python计算字符宽度的方法

JavaScript利用Canvas实现粒子动画倒计时

Python减少循环层次和缩进的技巧分析

python中defaultdict用法实例详解

Python进阶之列表推导与生成器表达式详解

django从请求到响应的过程深入讲解

SQL窗口函数之聚合窗口函数的使用(count,max,min,sum)

Python制作运行进度条的实现效果(代码运行不无聊)

python 用递归实现通用爬虫解析器

教你使用Python实现一个简易版Web服务器

Tornado高并发处理方法实例代码