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

2016-02-17 04:40 8 1 收藏

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

【 tulaoshi.com - 平面设计】

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

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

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

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

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

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

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

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

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

进入论坛参与讨论

来源:http://www.tulaoshi.com/n/20160217/1578579.html

看过《CSS教程：IE BUG消失的绝对定位元素》的人还看了以下文章更多>>

CSS中关于相对定位和绝对定位

标签： Web开发

style body {margin: 30px; font-size:9pt;} .a, .b, .c, .d, .e { width: 100px; height: 100px; margin: 5 auto; color: #fff; background: #000; } .aa, .bb, .cc, .dd, .ee { top: 10px; left: 10px; width: 10px; ...

CSS之绝对定位深入研究

标签： Web开发

一、下看个两个例子 1.xhtml代码 body div class="relative" span class="absolute"Test absolute/span /div /body 2.css代码 .relative { position:relative;height:120px; border:2px solid black; } .absolute { position:absolute; top:10px; left:10px; paddin...

快速定位到复杂的CSS BUG问题

标签： Web开发

相信大家对于常见 CSS BUG 的处理已经相对比较熟悉，例如：IE6 Three Pixel Gap、IE5/6 Doubled Float-Margin Bug 等等。但时常我们也会碰到复杂的 CSS BUG 问题，所谓复杂实质是指触发的条件很复杂，而BUG 也并非指一定是浏览器的 BUG 。对于此类问题，我们首先要解决的是如何定位到问题，只有快速的定位到问题，才能更好的解决问题。 ...

CSS分栏布局的方法:绝对定位和浮动

标签： Web开发

在CSS中，实现分栏布局有两种方法。第一种方法是使用四种CSS定位选项（absolute 、static、relative和fixed）中的绝对定位（absolute positioning），它可以将文档中的某个元素从其原本位置上移除，并重新定位在期望的任何地点之上。第二种则是使用CSS中的浮动（float）概念。绝对定位或浮动都能够用来实现分栏效果。二者可以独立使...

CSS分栏布局的方法：绝对定位和浮动

标签：平面设计海报设计广告设计画报设计签名设计服装设计名片设计画册设计版式设计商标设计

绝对定位或浮动都能够用来实现分栏效果。二者可以独立使用，也可以结合在一起，相辅相成。进入论坛参与讨论但是，我们常用的布局并没有这么简单，除了三栏之外，我们还需要一个页头和一个页脚，如下图：这时候，再用绝对定位布局就行不通了，因为绝对定位的元素会从文档流中完全移除，这时，页脚会紧挨着页头，显示在页头的下方。如...

查看更多精彩>>