`
lixinlixin2008
  • 浏览: 152407 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

怪异模式下 absolute 在IE6,7下的bug

CSSHTML 
阅读更多 
<!---->
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<style>
		*{
			margin:0px;
			padding:0px;
		}
		#d30{
			height:100px;
		}
		#d01{
			background:red;
			width:500px;
			height:500px;
			overflow:hidden;
			position:static;
		}
		#d01 #d02{
			background:yellow;
			width:200px;
			height:200px;
			position:absolute;
			top:100px;
		}
	</style>
</head>
<body>
	<div id="d30"></div>
	<div id="d01">
		<div id="d02"></div>
	</div>
</body>
</html>


可以看到d02的位置相对于父元素d01,而不是body,去掉d01的overflow:hidden;后正常,或者加dtd,在标准模式下也正常


网名: 天堂左我往右
分享到：
| 获取页面高宽度
评论
3 楼 zhouyrt 2009-07-14  
学习了，还是尽量加doctype吧，标准模式下css正常发挥作用。
2 楼 lixinlixin2008 2009-07-14  
jncz 写道
http://www.w3.org/TR/CSS2/visuren.html#absolute-positioning

In the absolute positioning model, a box is explicitly offset with respect to its containing block. It is removed from the normal flow entirely (it has no impact on later siblings).

意思是说，绝对定位的元素其偏移量是相对于其父元素的。所以不是body




绝对定位的元素其偏移量是相对于  absolute或者relative元素的,如果父元素是static,则继续寻找父父的元素是否是absolute或者relative的,直到body为止

示例里面父元素是static的,所以应该是相对于body定位的...
1 楼 jncz 2009-07-14  
http://www.w3.org/TR/CSS2/visuren.html#absolute-positioning

In the absolute positioning model, a box is explicitly offset with respect to its containing block. It is removed from the normal flow entirely (it has no impact on later siblings).

意思是说，绝对定位的元素其偏移量是相对于其父元素的。所以不是body
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ie特有bug文档

    - **问题描述**：在IE6/7中，当子元素具有`position: relative`属性时，将父元素设置为`overflow: [hidden | auto]`等同于将子元素的定位模式重置为默认的`position: static`。 - **解决方案**：为父元素设置`...

    ie6下定位bug解决

    在其他现代浏览器中，CSS的`position`属性如`relative`、`absolute`和`fixed`能很好地实现元素的定位，但在IE6中，这些属性的处理方式却大不相同，导致开发者需要进行特殊的“hack”来解决这些问题。 首先，IE6不...

    IE6, IE7, IE8 CSS 兼容速查表

    3. **浮动元素的清除**：IE6、7在处理浮动元素的清除时有bug，可能需要使用额外的空元素或`clearfix`类来解决。例如，可以为父元素添加`zoom:1`触发hasLayout，或者使用`:before`伪元素结合`clear:both`。 4. **...

    实用右下角弹出菜单（支持firefox、IE6、IE7）

    本文将详细讲解如何实现一个实用的右下角弹出菜单，该菜单兼容Firefox、Internet Explorer 6 (IE6) 和 Internet Explorer 7 (IE7) 浏览器，并具有自定义关闭和自动消失功能。 首先，让我们了解弹出菜单的基本构建。...

    ie6 7 支持css3 圆角

    在标题"ie6 7 支持css3 圆角"中，提到的问题是如何在这些老版本的IE浏览器中实现CSS3的圆角效果。 描述中提到的是一种解决方案，即使用插件来实现这一目标。这种插件通常是一个JavaScript或HTC（HTML组件）文件，...

    网页排版IE6兼容性问题修改方法

    `position:absolute`在IE6下可能无法正常工作，需要使用`position:relative`和`left/top`配合，或者使用`position:static`和`margin`调整。 8. **层叠上下文** IE6对层叠上下文的理解不同于其他浏览器，可能导致z...

    IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素

    这里提到的问题是关于IE6、IE7以及在IE8、9、10中使用IE7兼容模式下，对于绝对定位（absolute）或相对定位（relative）的父元素和子元素的显示与隐藏的一个特定bug。这个bug主要涉及到元素的`display`属性。 通常，...

    IE6下的纯CSS完美position:fixed实现

    为了在IE6下实现类似的效果，开发者通常需要采用一些hack或者JavaScript解决方案。这篇博客“IE6下的纯CSS完美position:fixed实现”可能介绍了一种通过CSS技巧或JavaScript工作来模拟`position: fixed`的方法。 ...

    CSS的下拉菜单,支持IE6 IE7 Firefox

    ### CSS的下拉菜单，支持IE6 IE7 Firefox #### 概述 本文将详细介绍一个兼容Internet Explorer 6（IE6）、Internet Explorer 7（IE7）以及Firefox浏览器的纯CSS下拉菜单实现方法。该下拉菜单不仅具有良好的跨浏览器...

    ie6下select覆盖div的解决办法

    这种方法在大多数现代浏览器中有效，但IE6可能会忽略z-index，除非元素也被定位（`position: absolute`或`relative`）。如果Select仍然在Div之上，可以尝试将Select也设置为`position: relative;`，并赋予一个比Div...

    解决PNG图片在IE6下背景不透明的问题

    在网页设计中，PNG图片因其支持透明度而广受欢迎，但在老版本的Internet Explorer（尤其是IE6）中，PNG图片的透明效果却常常出现问题。通常，PNG-24格式的图片在IE6下会出现背景不透明，显示为蓝色背景，这给设计师...

    垂直居中显示ie7+

    在网页设计中，"垂直居中显示"是一个常见的需求，特别是在多设备、多屏幕尺寸的环境下，确保元素在页面上无论何时都能保持居中状态，能够提供良好的用户体验。本话题主要探讨如何在IE7及以上的浏览器中实现元素的...

    IE6 -- IE8浏览器CSS兼容性查询手册【gif格式】

    1. 盒模型：IE6和IE7默认采用“怪异盒模型”，其中content区域的宽度和高度不包括padding和border，这与W3C标准盒模型不符。在IE8（标准模式）和现代浏览器中，盒模型遵循W3C标准。开发者可以通过设置`box-sizing`...

    IE6实现position:fixed bug (固定窗口方法)的实例

    这个内容是老生常谈了,主要问题就是IE6不支持 position:fixed 引起的BUG.当我们去搜索解决这个bug的垮浏览器解决办法时,绝大多数结果都是说使用 position:absolute 来替代解决,可是我们真的解决了么?没有,因为当页面...

    IE6不支持fixed解决方法

    ` 将元素的定位模式改为绝对定位，这是因为在IE6中，`fixed`定位不能直接使用，我们需要通过绝对定位来模拟。 - `_top:expression(offsetParent.scrollTop);` 这个表达式是IE6特有的，它会动态地更新元素的垂直位置...

    css兼容IE6、IE7、FF的技巧

    ### CSS兼容IE6、IE7、FF的技巧详解 #### 一、CSS Hack技术 **CSS Hack**是一种针对...通过上述方法，我们可以有效地解决IE6、IE7以及Firefox等浏览器之间的兼容性问题，提高网站在不同浏览器环境下的表现一致性。

    兼容IE6的遮罩层

    在早期的Web开发中，IE6浏览器由于其市场份额和用户需求，经常...在当前浏览器环境已高度兼容的背景下，虽然IE6的使用已经非常少，但理解这些历史遗留问题对理解Web发展史和提升跨浏览器兼容性能力仍然具有重要意义。

    纯css二级导航 兼容ie6

    6. **CSS Hack**：由于IE6对CSS的解析存在一些差异，可能需要使用特定的CSS hack来修正样式，例如`_property`前缀只在IE6下生效。 7. **渐进增强**：为了保证在所有浏览器中的兼容性，可以采用渐进增强的策略，即为...

    纯CSS的下拉菜单,支持IE6,IE7,Firefox

    尽管IE6和IE7的兼容性限制了部分CSS3特性的使用，但仍然可以通过一些技巧来实现类似的效果，确保了在旧版浏览器中的良好表现。在实际项目中，我们还应考虑其他浏览器的兼容性，确保广泛适用性。

Magicbox
Global site tag (gtag.js) - Google Analytics