ie浏览器怎么定位元素_如何修复IE中随机消失的绝对定位元素

ie浏览器怎么定位元素

8年后，您会认为IE6的所有错误都会得到详细记录和理解。 实际上，在那之后，您希望大多数问题都将在IE7或IE8中得到解决！

最近，一位沮丧的开发人员联系了我，他经历了IE中绝对定位元素的消失。 该错误非常怪异，您很少经常遇到该错误，并且网络上关于该错误的信息很少。 希望本文将以某种方式纠正这种情况。

问题

考虑以下布局：

HTML元素按指定的顺序编码，即内容块1和2，标题3，右侧块4和页脚5。外部容器设置为position：相对，并且所有项目都分配了宽度，因此IE hasLayout。 它可能不是最有效的布局，但它是有效的并且可以在所有浏览器中使用。 除了IE6，IE7以及可能的IE8…… 有时 。

第一次访问该页面时，IE可以拒绝显示标题。 但是，在同一站点上访问相似编码的页面时，标题可能会重新出现。 返回首页也可以重新出现吗？

此问题是由IE错误引起的，该错误会在对浮动元素（紧挨浮动的同级元素之前或之后）进行编码时隐藏绝对定位的元素。 不幸的是，这种情况并不一定会触发错误-它取决于时间！ 文件的下载时间和渲染速度会影响文件是否出现。 以我的经验，如果缓存了某些文件，则似乎不太可能发生该错误。

因此，这是一个示例页面 。

不幸的是，该错误是如此不一致，以至于不可能创建一个保证能够正常工作（或失败？）的错误。

在我本地PC的服务器上，标头在IE6、7和8中消失。在SitePoint服务器上，它仅在IE6和7中消失。您可能会有不同的体验。

此外， 假冒的 IE（例如IETester）不一定会出现相同的问题。 我建议在虚拟机中使用IE的真实版本（例如，在Windows 7 XP模式下在同一台计算机 上运行IE6，IE7和IE8，或者在Windows 7 HOME上如何运行IE6，IE7和IE8 ）。

解决方案

幸运的是，有一个快速而又肮脏的解决方案：只需在绝对定位的元素之前和/或之后放置一个空的未定位静态<div> </ div>即可。 在固定的示例中 ，标头后面的空白<div> </ div>可防止出现此问题。

语义HTML的奉献者会被吓到，但恐怕似乎没有CSS专用的修复方法…除非有人知道，否则？

更好的解决方案是在没有绝对放置标题的情况下更有效的布局。 不幸的是，如果您没有及早和经常测试IE，那可能需要大量的代码重构。

您以前是否经历过这个奇怪的错误？ 还是完全放弃了IE？

翻译自: https://www.sitepoint.com/fix-disappearing-absolute-position-element-ie/

ie浏览器怎么定位元素