具有动态修改页面内容的IE7相对/绝对定位错误
我想知道是否有人想知道如何解决IE7中的以下问题：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>IE7 absolute positioning bug</title>
<style type="text/css">
#panel { position: relative; border: solid 1px black; }
#spacer { height: 100px; }
#footer { position: absolute; bottom: 0px; }
</style>
<script type="text/javascript">
function toggle() {
var spacer = document.getElementById("spacer");
var style = "block";
if (spacer.style.display == "block" || spacer.style.display == "") {
style = "none";
}
spacer.style.display = style;
}
</script>
</head>
<body>
<div id="panel">
<button onclick="toggle();">Click me</button>
<br /><br /><br />
<div id="spacer"></div>
<div id="footer">This is some footer</div>
</div>
</body>
</html>
当您在IE7中运行此代码时，您会发现修改“面板”的CSS后，“页脚”元素仍然存在。在IE8，FF和Chrome中测试的同一示例的行为完全符合预期。
我已经尝试过更新元素的类，但是如果浏览器的窗口已最大化打开并且没有对窗口进行进一步的大小更改（这大约是我们产品的用例的90％），则此操作不起作用。
。:(）我坚持使用基于CSS的解决方案，但是我认为，如果可以轻松地使它成为特定于IE7的方式，则可以在这种情况下例外（这意味着其他浏览器将以此为标准方式）
。
请帮忙！
问题答案：
这与IE的“ hasLayout错误”有关。相对定位的#panel父级没有布局，因此IE在调整大小/位置后会忘记重绘其子级。
如果将其添加overflow: hidden;到相对定位的#panel父级，则问题将会解决。
#panel { position: relative; overflow: hidden; border: solid 1px black; }
有关此IE错误的深入背景信息，可以在出色的参考资料“关于布局”中找到，然后针对您的特定问题，特别是在“相对位置元素”一章中：
请注意，position: relative它不会触发hasLayout，这会导致一些渲染错误，大多数情况下是内容消失或放置错误。页面重新加载，窗口大小调整和滚动，选择可能会遇到不一致的情况。使用此属性，IE会偏移元素，
但似乎忘记了向其布局子元素发送“重绘” （因为布局元素在重绘事件的信号链中会正确发送）。
该overflow属性触发元素进行布局，另请参阅“布局来自何处”一章：
从IE7开始，
overflow成为布局触发。
-
问题内容： 根据W3Schools： 相对定位的元素通常用作绝对定位元素的容器块。 为什么是这样？有没有很好的例子？ 问题答案： 一个很好的例子是当您想将某些内容放置到页面上或相对于容器/ div放置时。 这向您显示，如果绝对div不在“相对” div内，则内容将与文档主体对齐。 请注意，绿色div（）的div内部（）的对齐方式为的上/右对齐。 蓝色框（）具有与绿色框（）完全相同的HTML布局，但
-
我有一个具有绝对位置的div元素。位置值很重要，不能更改。如何在div中设置页眉、内容和页脚？ 页眉和页脚的高度是固定的，内容应该占用剩下的所有空间。同样重要的是，页眉始终在顶部，页脚在底部。 父元素也应该是可调整大小的，并使用south resizable句柄，内容应该根据父元素的高度改变其高度。 情况示例:http://jsfidle.net/7gpzf/26/
-
在页面布局中，将绝对定位的元素嵌套在相对定位的容器中，是一种很常见的布局。假设有两个元素，#outter 为父元素，#inner 为子元素： <div id="outter"> <div id="inner"></div> </div> 如果让父元素使用相对定位，子元素使用绝对定位，在 IE6 及更低版本中，它会有很多问题。最常见的问题有两个：一个问题是，当父元素的宽度为奇数时，子元素的
-
本文向大家介绍说说你对相对定位、绝对定位、固定定位的理解相关面试题，主要包含被问及说说你对相对定位、绝对定位、固定定位的理解时的应答技巧和注意事项，需要的朋友参考一下 https://www.w3schools.com/css/css_positioning.asp https://www.w3school.com.cn/cssref/pr_class_position.asp
-
问题内容： 我有3个要素。 第一个更大（包装）并具有 第2个相对于第1个相对位置绝对定位（并包含在第1个中） 第3个包含在第2个中，并且也具有绝对定位。 为什么第3个位置相对于第2个绝对位置（这也是第1个位置的绝对位置）而不是相对位置的第一个位置？ 因为3rd 是绝对定位到2nd的绝对定位。 问题答案： 因为就像重置孩子的相对位置一样。 这是无法解决的-如果您希望第三个相对于第一个绝对定位，则必须
-
我们已经为一些静态页面创建了动作和视图，现在要稍微添加一些动态内容，根据所在的页面不同而变化：我们要让标题根据页面的内容变化。改变标题到底算不算真正动态还有争议，这么做能为第 7 章实现的真正动态内容打下基础。 我们的计划是修改首页、“帮助”页面和“关于”页面，让每页显示的标题都不一样。为此，我们要在页面的视图中使用 <title> 标签。大多数浏览器都会在浏览器窗口的顶部显示标题中的