CSS中IE6浮动模型Bug详解

  次阅读 来源:互联网(转载协议) 2016-03-25 16:33 我要评论(0)

CSS浮动模型可以说是标准布局中不可或缺的组成部分,可是对于浮动模型在IE6的表现症状你是否已经完全了解或者掌握呢?如果你的答案是肯定的,那恭喜你不用听我的嗦了,如果你的答案是模糊的,那么下面的讨论或许对你以后的学习有所帮助。

首先看一下W3C对浮动模型部分解释(http://www.w3.org/TR/REC-CSS2/visuren.html):

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn't exist. However, line boxes created next to the float are shortened to make room for the floated box. Any content in the current line before a floated box is reflowed in the first available line on the other side of the float.

A float can overlap other boxes in the normal flow (e.g., when a normal flow box next to a float has negative margins). When an inline box overlaps with a float, the content, background, and borders of the inline box are rendered in front of the float. When a block box overlaps, the background and borders of the block box are rendered behind the float and are only be visible where the box is transparent. The content of the block box is rendered in front of the float.

从中我们可以得到几个基本信息:

1、如果浮动元素在非浮动块元素之后,则浮动元素将会出现在非浮动块元素的下方;

2、假如浮动元素在非浮动块元素之前,则非浮动块元素内容将会显示浮动块元素行后。

3、在浮动元素之后的非浮动块元素会无视该浮动元素的存在,显示在与浮动元素开始的位置,浮动元素显示在非浮动块元素之上。

那么让我们看看IE6是否也是按照这个原则来解析的呢。实际情况是,IE6又开始了“个人英雄主义”,和标准解析有所出入。

那具体出入在那里,出入大小如何,下面,我们用例子来分析(为了书写的方便,所有代码将把CSS直接带入到XHTML中):

示例代码 [www.mb5u.com]

<div style="float:left;">这是浮动区块内容。</div>

<p>这是非浮动的段落</p>

假如对浮动的div不设置宽度,div的宽度将按照实际内容的宽度自适应,为了后面的直观表现和实验的方便,我们给浮动div设置宽度100px和高度100px,并且为了更好的区分元素的区域,我们分别给浮动div和非浮动的p设置背景色,给浮动div设置margin-top值,修改如下:

示例代码 [www.mb5u.com]

<div style="float:left; width:100px; height:100px; background:#e00; margin-top:10px;">这是浮动区块内容</div>

<p style="background:#ccc;">这是非浮动的段落</p>

测试IE6和Firefox浏览器,我们会发现非浮动块元素p在没有设置宽度的情况下,占据整个显示区域的宽度(或者准确点说,是占据所在的容器的整个宽度)。

下面我们将对非浮动元素p设置宽度非auto值,比如width:200px或者width:20%,这时我们会发现IE6和Firefox下,发生了变化。

Firefox还是按照上面的解析方式来解析,而IE却不再是,开始解析为从浮动元素的右侧边开始计算宽度。或许有人问这是为什么呢,其实这个是有根源的,是IE的layout问题,假如你对layout还不熟悉,依然推荐阅读old9翻译的《On having layout》。

最后建议对浮动元素后的非浮动块元素,尽量不要制定其宽度或高度,以便引起IE6的“个人英雄主义”,而改换使用margin来定位。注重:假如浮动元素不是图片,则在IE下,两个元素之间会产生 3个像素的间隙BUG.

本站部分文章来源于网络以及网友投稿,本站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。如果您有什么意见或建议,请联系QQ28-1688-302!

人工智能实验室
相关文章相关文章
  • 长虹新款智能语音空调,告诉你空调也能玩Siri

    长虹新款智能语音空调,告诉你空调也能玩Siri

  • 让AI触手可及  Qualcomm携手创通联达推出全新终端侧AI开发套件

    让AI触手可及 Qualcomm携手创通联达推出全新终端侧AI开发套件

  • 品友互动为Digital Travel APAC2018 唯一受邀中国AI企业

    品友互动为Digital Travel APAC2018 唯一受邀中国AI企业

  • 第一批国家重点研发计划公布,旷视科技开启“五年行动”

    第一批国家重点研发计划公布,旷视科技开启“五年行动”

网友点评网友点评
阅读推荐阅读推荐

据外媒报道,STEER打造了首款完全自动驾驶停车技术,旨在使常规车辆转变为无人驾驶车辆。STEER的首款技术应用是4级自动驾驶及网络安全停车...

近日,美国软性机器抓手制造商 Soft Robotics 宣布,获得 2000 万美元的融资,本轮投资者包括 Scale Venture Partners,Calibrate Ventures...

据外媒报道,加州车管局发布了《2017自动驾驶脱离报告(California Autonomous Vehicle Disengagement Reports)》,其中谈及了脱离的具体...

用人机语音交互,来解决智能家居适老的问题;通过家庭门禁与安防套件、空气净化套件、可燃气体与有害气体监控套件等相互联动,在不同生活情...