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

猜你喜欢

AJAX的jQuery实现入门(一)

Mysql 数据库双机热备的配置方法

不同浏览器所支持的“事件”

jQuery 1.3.3 新功能[译]

用JS实现一个页面两份样式表

SQL触发器在保持数据库完整性中的实际应用

用ASP实现IE地址栏参数的判断

ASP用户登录模块的设计源码

xml xpath基础语法

页面中横排布局的思考

《色彩解答》系列之二色彩比例

很有创意的鼠标指针风筝

mysql 主从服务器的简单配置

ASP使用wsImage组件给图片加水印

网址导航的组织方法

通过MySQL内置全文检索实现中文的相关检索

多个域名后缀同时查询的域名查询系统代码

用数据库生成不重复的流水号

SQL语句之WHERE子句的使用方法

实现一个获取元素样式的函数getStyle

Overflow Auto && Position Relative

猜你喜欢

AJAX的jQuery实现入门(一)

Mysql 数据库双机热备的配置方法

不同浏览器所支持的“事件”

jQuery 1.3.3 新功能[译]

用JS实现一个页面两份样式表

SQL触发器在保持数据库完整性中的实际应用

用ASP实现IE地址栏参数的判断

ASP用户登录模块的设计源码

xml xpath基础语法

页面中横排布局的思考

《色彩解答》系列之二 色彩比例

很有创意的鼠标指针风筝

mysql 主从服务器的简单配置

ASP使用wsImage组件给图片加水印

网址导航的组织方法

通过MySQL内置全文检索实现中文的相关检索

多个域名后缀同时查询的域名查询系统代码

用数据库生成不重复的流水号

SQL语句之WHERE子句的使用方法

实现一个获取元素样式的函数getStyle

《色彩解答》系列之二色彩比例