＂position:relative＂在IE中的Bug
即子元素过高导致父元素出现滚动条时，它并不会像预期的那样呆在父元素里，而是浮在父元素之上，并且位置不随滚动条的移动而改变。根源就是子元素的"position:relative"。目前只发现ie中有此问题。
页面源码：
Html代码
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html>
- <head> <title>relative bug</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style type="text/css">
- <!-- #container {
- background:blue; height:100px;
- width:300px; overflow:auto;
- /*position:relative;*/ }
- #container>div { background:red;
- height:300px; width:150px;
- margin:0 auto; position:relative;/*这句会触发bug*/
- } -->
- </style> </head>
- <body> <div id="container">
- <div></div> </div>
- </body> </html>
解决方法：为父元素也添加"position:relative"设置。在上例中，只需把#container的注释还原即可。
顶(1)
踩(0)
下一篇：网页背景图片不能显示的解决办法
- 最新评论