gpt4 book ai didi

html - ie8 bug : fixed position div, inside relative position div, inside relative position floated div ... doesn't render

转载 作者:太空宇宙 更新时间:2023-11-03 18:56:15 28 4
gpt4 key购买 nike

此 HTML 无法在 IE8 中正确呈现。它适用于 Firefox、Opera、IE7、IE9 和 IE10。 (当然,它在 IE6 中也不起作用,因为它涉及固定位置的元素。)

实际上它在 Chrome 中又做了一些不同的事情。

我能想到的最窄的测试用例是:

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style>
div {
width: 100px;
height: 100px;
}
</style>
</head>

<body>

<div style="background-color: red; position: relative; top: 50px; left: 50px; float: left;">
<div style="background-color: blue; position: relative; top: 200px; left: 200px;">
<div style="background-color: green; position: fixed; top: 0;">
</div>
</div>
</div>

</body>
</html>

在 IE8 中,最里面的 div(绿色的)以某种方式忽略了祖父 div(红色的)的 50px 左缩进,甚至直接父级(蓝色的)也会考虑到它。奇怪的错误!

只有当 div 以这种方式双重嵌套时才会发生,并且只有当祖 parent float 时才会发生。如果我删除 float ,那么它呈现 OK。 (但是,我需要它 float ,所以这对我来说不是解决方法。)

编辑

我最初以为我已经在 Chrome 中对此进行了测试,但实际上 Chrome 做了完全不同的事情。

我不知道哪个浏览器才是正确的。

最佳答案

这里没有错误。绿色 div 具有“position: fixed”,它相对于浏览器窗口定位元素,而不是相对于其他元素定位自身。

我的猜测是您希望绿色 div 相对于蓝色 div 定位,对吗?然后在绿色 div 上使用“position: absolute”。

关于html - ie8 bug : fixed position div, inside relative position div, inside relative position floated div ... doesn't render,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13399840/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com