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

济南新中医界

济南新中医界

2016-02-17 04:40

下面是个简单易学的CSS教程:IE BUG消失的绝对定位元素教程,图老师小编详细图解介绍包你轻松学会,喜欢的朋友赶紧get起来吧!

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

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

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

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

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

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

CSS教程:IE BUG消失的绝对定位元素,PS教程,图老师教程网

经过实验,我发现,只要浮动元素的宽度不填满父元素,绝对定位元素就能正常显示,一旦浮动元素的宽度填满父元素,绝对定位元素就会消失。而且,看来,父元素宽度是这种情况发生的临界点。本文来自前端观察,转载请以链接形式注明出处。

CSS教程:IE BUG消失的绝对定位元素,PS教程,图老师教程网

另外,这个 demo 里面也存在 IE6 的另一个经典 bug : 由注释产生的表现不同。(唉,bug 都成经典了,IE 无敌啊。 糖伴西红柿)本文来自前端观察,转载请以链接形式注明出处。

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

进入论坛参与讨论

展开更多 50%)
分享

猜你喜欢

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

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

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

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

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

CSS教程—元素的定位

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

深入了解CSS 解决浮动元素消失BUG

Web开发
深入了解CSS 解决浮动元素消失BUG

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

CSS元素定位

Web开发
CSS元素定位

IE CSS Bug

Web开发
IE CSS Bug

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

美图秀秀教程:教你做拼图场景篇

美图秀秀教程:教你做拼图场景篇

网页美工应该了解的CSS3新技术

网页美工应该了解的CSS3新技术
下拉加载更多内容 ↓