IE6和IE7渲染相对定位元素的Bug

最新推荐文章于 2015-07-09 16:53:32 发布

iteye_13506

最新推荐文章于 2015-07-09 16:53:32 发布

阅读量166

点赞数

分类专栏： css 文章标签： CSS 浏览器 IE HTML

本文链接：https://blog.csdn.net/iteye_13506/article/details/81932662

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这个Bug很恼人。如果网页元素的样式使用了“position: relative”就很可能遇到这个问题。问题的表示为设置了position:raltive的元素在浏览器改变大小或者拖动滚动条时位置不会发生变化。任你怎么拖动浏览器的边框或者滚动条，这个元素就是赖在那里不动。

具体的描述可以参看这里:http://friendlybit.com/css/ie6-resize-bug/(英文)

要自己重现也很简单，样式太概是这样的:

body {
   margin: 0 auto;
   width: 760px; /* 任意设置一个固定宽度的容器 */
}
/* 把你要测试的元素放入容器并设置CSS： position: relative; */
#example p {
   position: relative;
}

HTML可能是这样的：

<html>

<head>

<title>test</title>

<style>

body { margin: 0 auto; width: 760px; border:1px red; /* 任意设置一个固定宽度的容器 */ }

/* 把你要测试的元素放入容器并设置CSS： position: relative; */ #example p { position: relative; border:1px green; }

</style>

</head>

<body>

<div id=”example”><p>当浏览器改变窗口尺寸时这里的文字位置不会改变。</p></div>

</body>

</html>