Css教程:FireFox正常IE错位的绝对定位元素

混┾亍世魔王

混┾亍世魔王

2016-02-20 00:10

今天图老师小编要跟大家分享Css教程:FireFox正常IE错位的绝对定位元素,精心挑选的过程简单易学,喜欢的朋友一起来学习吧!

IE 一如既往地带来问题。真的,我觉得 IE 坚持自己的一套无所谓,不支持或者不完全支持标准也无所谓。但是,IE6 IE7 IE8 这三个版本都有各自不同的表现,实在是太让人难受了。

前两天碰到了这个奇怪的问题:

绝对定位的元素,紧邻着两个浮动元素。Firefox 中一切正常,IE6 中绝对定位元素消失了。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

解决方法:只要别让绝对定位元素紧邻浮动元素就可以了。比如可以在绝对定位元素后面加个空元素。当然,这个空元素是毫无意义的,但是,在 IE 面前,又能怎么样呢?

demo1

经过实验,我发现,只要浮动元素的宽度不填满父元素,绝对定位元素就能正常显示,一旦浮动元素的宽度填满父元素,绝对定位元素就会消失。而且,看来,父元素宽度是这种情况发生的临界点。

demo2

另外,这个 demo 里面也存在 IE6 的另一个经典 bug : 由注释产生的表现不同。(唉,bug 都成经典了,IE 无敌啊。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

请看上面的图中,上面那块,就是有注释的,下面那块是去掉注释的,可以明显的看到底部的白色空白高度是不同的。

看具体演示效果:


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

展开更多 50%)
分享

猜你喜欢

Css教程:FireFox正常IE错位的绝对定位元素

Web开发
Css教程:FireFox正常IE错位的绝对定位元素

CSS教程:IE BUG消失的绝对定位元素

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
CSS教程:IE BUG消失的绝对定位元素

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS教程—元素的定位

Web开发
CSS教程—元素的定位

CSS元素定位

Web开发
CSS元素定位

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

CSS教程:position 绝对定位的问题

Web开发
CSS教程:position 绝对定位的问题

CSS网页布局教程:绝对定位和相对定位

Web开发
CSS网页布局教程:绝对定位和相对定位

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Windows 8中如何创建宽带连接及设置方式

Windows 8中如何创建宽带连接及设置方式

Win 8系统消息提醒设置

Win 8系统消息提醒设置
下拉加载更多内容 ↓