关于IE6下绝对定位元素莫名消失的问题

这是个很老的bug了,我想一般大家都遇到过,以前我是纯凭经验,让绝对定位的元素不挨着浮动元素就OK了,不过一直没去研究它形成的原因。今天做页面又遇到了这个可爱的BUG,本着一探究竟的心态google了一下。在蓝色理想发现了这样的几条解释:

1.当绝对定位层的邻近浮动层的宽度不等于父层宽度时,以及没有清除浮动时,IE6/7,FF中显示一致;

2.当绝对定位层的邻近浮动层的宽度不等于父层宽度时,有清除浮动时,IE6/7不显示绝对定位层,FF显示;

3.当绝对定位层的邻近浮动层的宽度等于父层宽度时,以及没有清除浮动时,IE6不显示绝对定位层,IE7/FF显示;

4.当绝对定位层的邻近浮动层的宽度等于父层宽度时,有清除浮动时,IE6/7不显示绝对定位层,FF显示;

就目前来说我个人的解决办法有两条,第一取消浮动,第二让绝对定位的元素不要挨着浮动的标签。蓝色上那位哥们提出了另一个办法,就是在绝对定位的层跟浮动层中间插个空的标签。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏天天

微信小程序tab切换加联动

注:数据绑定,特别是怎么动态绑定class,控制选中或者未选中状态,其中,绑定class或者style都和vue中的格式不太一样

682
来自专栏前端小叙

基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多

通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到...

4555
来自专栏技术墨客

React学习(11)—— 高阶应用:Web组件

从概念上说,React 和 Web组件 分别用于解决不同的问题。Web组件提供了强大的封装特性来支持其可重复使用性,而React提供了一系列声明性(declar...

602
来自专栏老马寒门IT

08-移动端开发教程-移动端适配方案

由于移动端的特殊性,屏幕的尺寸碎片化严重,要想很好的适配不同的尺寸的设备,需要我们前端开发相比PC端要做一些基层的适配方案。 1. 常见的适配方案 百分比+固定...

3056
来自专栏互联网杂技

移动前端开发之viewport的深入理解

在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta...

3595
来自专栏前端架构

chrome对页面重绘和回流以及优化进行优化

1. 当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流,就...

623
来自专栏企鹅号快讯

为什么CSS Grid在创建布局上比Bootstrap更好

CSS Grid是一种在网络上创建布局的新方法。在我们第一次使用浏览器原生的CSS网格布局后,发现这种方式给我们带来太多好处了。 特别是如果将CSS Grid与...

2366
来自专栏郭诗雅的专栏

玩转flex布局

H5页面如果使用了flex,就会发现处处离不开它,因为实在太多优点了!

36819
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native 开发适配心得

众所周知用React Native是可以开发跨平台的Android和iOS App。我们可以用React Native开发Android应用也可以开发iOS应用...

3175
来自专栏十月梦想

Vue动画之多个元素或组件的动画效果

        前面我们看的是单个元素的过渡效果,我们看一下多个元素或者组件的过渡

902

扫码关注云+社区