php斯芬克斯,斯芬克斯之迷——ie私有属性haslayout的困扰

就象神话中的斯芬克斯一样,ie的私有属性haslayout是个神秘且让人困惑的难缠东西,她只游荡于ie(这片沙漠)之下。

她无法使用css声明直接创建。即便是对于ie,她也不能说是一个实实在在存在的属性。

ie下的元素有些本身拥有haslayout(基本上是一些拥有内在尺寸的可置换元素),有些可以通过一些css属性可以触发产生。我们可以在ie developer toolbar上查看到到haslayout这个属性项,他的值是-1。这说明这个元素触发了layout。

详细haslayout资料:On having layout抄录

更详细资料:译文On having layout这篇文章本人还没怎么看,相信很多问题在这里都有解释

遇到斯芬克斯是件很麻烦的事情,她会给你提出很多怪怪的让人困惑的问题,更何况只要我们在ie沙漠中游荡的话,遇到的概率是非常高的。

遇到她,我们会有三种结果:

猜不出迷题的答案——我们会在迷失在困惑中;

猜错了迷题的答案——我们会误会很多东西;

猜对了迷题的答案——恭喜你,你就不用怕斯芬克斯这个丑婆娘了。

那让我们来猜一下她的几个比较困惑的问题吧。

斯芬克斯之迷1:是firefox错了?

*{padding:0;margin:0;}

.wrap{}

#left{float:left;color:red;}

#right{background:#ccc;margin-top:50px;}

left

left是浮动元素,她脱离了文档流(注意,这是下一个斯芬克斯之迷),所以right的margin-top相对的是其上级wrap作用的。但我们只是对right设置margin-top。结果在FF下,怎么连left也“产生了margin-top”呢。对比ie和FF下的效果,是不是觉得IE下的解析会比较合理呢?

但是

别忘了影响margin-top/bottom的一个重要规则——margin塌陷(margin collapsing)。

在ff下就是产生了这么一个margin塌陷。导致wrap的”剥夺”了本属于子元素#right的margin-top值。

为了更加直观看出是否塌陷,可以給wrap添加一个背景:background:#000;

*{padding:0;margin:0;}

.wrap{background:#000}

#left{float:left;color:red;}

#right{background:#ccc;margin-top:50px;}

left
在FF下,对right设置margin-top。结果不止right上方空出了50px;连left也一样空出了50px;是FF的解析有问题吗?

在ff下wrap块的高度并没有被子元素right的margin-top撑开。反而自身拥有了50px的margin-top。

而浮动的left尽管脱离了文档流,但还是受其父级限制的(这跟absolute定位的元素层受限于其定义为relative的父级一样)。所以left还是包含在wrap之中,这样在ff下看起来left也拥有margin-top,而事实上是因为wrap高度不撑开的结果。

这么说,FF并没有错咯,那么IE下又是怎么避开margin塌陷的呢?

问题就出在浮动上面,在ie下,元素浮动将触发其haslayout。就是这个原因,使得在ie下意外(意外?)的就避开了margin塌陷。

haslayout差点让我们怀疑了我们的亲密伙伴firefox。

———-谜题之外———–

但是,margin塌陷往往不是我们想要的效果。那么我们需要怎么避开他呢?

可以看下这篇独立文章:如何解决麻烦的margin塌陷(margin collapsing)

斯芬克斯之迷2:在ie下,float元素不脱离文档流?

在前面的问题里,我们提到浮动元素时一直认为浮动元素脱离文档流。但是看一下下面这个现象:

ie下,float不脱离文档流?

*{padding:0;margin:0;}

.wrap{}

#left{float:left;color:red;}

#right{background:#ccc;width:500px;}

left
ie下width:500px;触发了#right的layout,所以貌似ie下float并不会脱离文档流,

很多人都一直怀疑浮动元素脱离文档流的这种说法,就是因为ie下haslayout的经常出现。ie下,浮动的元素(left)牢牢的占着自己的位置。后面的block元素(right),只能跟随其后(请对比FF下的效果)。

没错,这又是haslayout在迷惑我们,这回除了left因为浮动触发了haslayout外,right也由于使用了width:500px也触发了haslayout,使得他考虑到了前面浮动的left元素。

如果把right的宽度去掉,或则把值改成auto。就能使ie下达到ff下一样的效果:后面的block元素会忽略前面浮动元素的存在,直接跑到浮动元素的z轴方向的下面(为什么是下面?因为浮动元素的Z值较正常的要高),而inline元素则环绕此浮动元素。

我们再看一个更加明了的demo:

haslayout影响浮动元素脱离文档流
ie下。去除父级wrap的width:100%。对比效果。

由于父级使用width:100%.触发了haslayout。使得原本脱离文档流的浮动元素,又在其父级之内拥有了一席之地。

——-谜题之外——–

浮动有三个作用效果:

一是使得自身脱离文档流,使得父层不适应其高度,而后面的block元素也将忽略其“存在”,跑到浮动元素之下(可在block元素上加背景色查看);

二是使得后面的inline元素“顺流环绕”浮动元素。

三是浮动元素的尺寸,如果未定义的话,将按内部元素的尺寸来决定(而不是block元素默认的充满整行)。而且即便浮动元素本身是非可置换inline元素,她都可以定义width/height(还有margin也将算入尺寸计算)。

其实第一个效果往往不是我们所想要的。所以ie下的haslayout可以说正中我们下怀。那么FF下怎么让left元素不脱离文档流(看起来没有脱离)呢?

在上面的例子中,我们可以对right也使用浮动,或则在right加上overflow:hidden。

知道了这个原理,我们对于这个【右列宽度自适应】的布局(其实这是个左右布局均自适应的布局。一般来说我们会固定左列的宽度)就能很好理解了:

zoom:1针对IE系列触发haslayout.overflow:hidden针对FF。使得right不会忽视已经脱离文档流的浮动元素left。

二列,右列自适应宽度布局

*{padding:0;margin:0;}

.wrap{overflow:hidden;}

#left{float:left;color:red;}

#right{background:#ccc;zoom:1;overflow:hidden;}

left
更多右列宽度自适应布局的方法:http://www.cssass.com/blog/index.php/2008/31.html

IE下的haslayout会引发很多问题:

IE 很多常见的浮动 bug 。

元素本身对一些基本属性的异常处理问题。

容器和其子孙之间的边距重叠(margin collapsing)问题。

使用列表时遇到的诸多问题。

背景图像的定位偏差问题。

使用脚本时遇到的浏览器之间处理不一致的问题。

她经常让我们困惑不堪。

但是只要逐步认识她,重视她。经常怀疑,怀疑自己的怀疑。我们就能慢慢摸清她的谜题,了解问题的本质。

这篇文章发布于 2009年03月21号,星期六,07:02,归类于 CSS2, 浏览器与兼容。您可以跟踪这篇文章的评论通过 RSS 2.0 feed。

您可以留下评论,或者从您的站点trackback。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/245344.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

matlab计算联合熵,如何用matlab软件计算一幅图像信息的熵以及两幅图像间的联合熵?...

%计算一副图像的熵%随机生成图像Afloor(rand(8,8).*255);[M,N]size(A);tempzeros(1,256);%对图像的灰度值在[0,255]上做统计for m1:M;for n1:N;if A(m,n)0;i1;elseiA(m,n);endtemp(i)temp(i)1;endendtemptemp./(M*N);%由熵的定义做计算result0;for i1:length(temp)if temp(i)0;…

python多线程写日志_python 应用logging多线程写多个log文件

python 使用logging多线程写多个log文件import threadingimport timeimport loggingimport logging.handlersLEVELS{notset:logging.DEBUG,debug:logging.DEBUG,info:logging.INFO,warning:logging.WARNING,error:logging.ERROR,critical:logging.CRITICAL}LOG_FILENAME test.…

php在数据库中上传图片格式,如何上传图片并在php中保存数据库中的URL

在这个PHP代码中我想自定义图像上传目的地 . 有了这个php文件,我有一个名为uploads的目录 . 我想将我上传的所有图像添加到此目录并在db中存储路径 . 我怎样才能做到这一点?// Assigning value about your server to variables for database connection$…

matlab转python难吗_MATLAB在逐渐被Python淘汰吗?

题主的问题我很适合回答,同机械工程大专业,目前供职某车企研发中心,工作内容里也有产品的控制系统研发部分。Matlab与Python各有其优势项,很难笼统的说孰优孰劣。但是在题主所涉及的机械控制工程、航空航天、嵌入式等领域&#xf…

自然水体辐射特性与数值模拟 pdf_OpenGMS系列讲座(十三)汪亚平教授:南黄海水动力过程和辐射沙脊群演化...

2020年8月28日,南京大学海岸与海岛开发教育部重点实验室汪亚平教授应地科院陈旻教授邀请,作客南京师范大学虚拟地理环境教育部重点实验室OpenGMS系列讲座,并做了题为"南黄海水动力过程和辐射沙脊群演化" 的报告。汪教授首先通过两个…

matlab2014a 3d标定,[转载]张的matlab摄像机标定

自己写了下matlab张的标定程序,采用张正有网站上的数据,即数据文档Model.txt data1.txt data2.txtdata3.txt data4.txt data5.txt。其中Model.txt为世界坐标系中的点【实验结果】我的程序:k1 -0.2286 k2 0.1903 fx 832.5000fy 832.5298 cx 30…

插值算法及matlab实现,MATLAB 插值算法实现

1.高斯插值function f Gauss(x,y,x0)if(length(x) length(y))n length(x);elsedisp(x和y的维数不相等!);return;endxx linspace(x(1),x(n),(x(2)-x(1)));if(xx ~ x)disp(节点之间不是等距的!);return;endif( mod(n,2) 1)if(nargin 2)f GStirling(x,…

小括号教学设计导入_【教资面试】语文政治历史地理教学设计答题技巧!

语文1.确立教学目标的依据 (1)基础教育课程改革课程改革要求语文课程必须面向全体学生,使学生获得基本的语文素养。对知识与技能,过程与方法,情感态度与价值观三个方面目标的整合,是语文新课程的价值追求。 根据语文学科工具性与人…

macos安装低版本php,mac下安装多个版本PHP及切换

mac电脑原来安装的是php 5.6.29现在再安装两个版本。php 5.6.32 php 7.0.27本文的原理就是用一个php管理工具(php-version)管理切换两个php。首先要先安装个包管理工具Homebrew:https://brew.sh/。一、先安装PHP5.6。brew install php56二、把PHP5.6的链接解除掉。b…

360浏览器卸载_陈蛋蛋碎碎念—如何完美地卸载流氓软件

陈蛋蛋碎碎念—如何完美地卸载流氓软件很多小伙伴都会有困扰,明明我就是只下载了一个软件啊,怎么电脑上莫名其妙地多了一大堆软件,什么我是渣渣辉一刀就是99级的游戏,什么影视全家桶,又或者是各种各样的浏览器&#xf…

oracle 抽样_深入理解Oracle动态采样

Oracle动态采样(Dynamic Sampling,12c称为Dynamic statistics),是对统计信息的⼀一个重要补充,当数据动态变化,⽆无法⽤用典型的统计信息描述时,动态采样可以给在解析时对表中数据进⾏行行采样,为优化器器提…

php target属性值,form表单的target属性

一 表单提交到了哪里?我们都知道表单提交到服务器,java,php,asp等服务器,然后由服务器去读。那么之后呢,服务器总要返回点什么吧,要么返回 一个xml或json数据,要么返回一个页面&…

java int相除向上取整_Java基础篇——Java运算符

Java运算符按功能可分为:算数运算符、关系运算符、逻辑运算符、位运算符、赋值运算符和条件运算符。算数运算符算术运算符包括通常的加()、减(-)、乘(*)、除(/)、取模&am…

tns 连接超时_ORA-12170:TNS:连接超时

在Red Hat Enterprise Linux Server Releae 5.5 成功安装ORACLE 10g 后,在客户端配置TNS后,测试是否可以连接到数据块服务器,结果报错: ORA-12170:TNS:连接超时1:首先检查网络是否能ping通&…

nginx php access denied,LNMP 解决Access Denied错误详细介绍

处理搭建好LNMP环境之后,呈现了Access Denied错误搭建好LNMP环境之后,呈现了Access Denied错误,现已扫除掉文件权限的问题也扫除掉是Nginx的问题,而是无法解析PHP的问题。发现网上的很多大牛都是经过Nginx的log来排查错误&#xf…

dp主机_MODBUS 和 PROFIBUS-DP 协议有什么区别

modbus协议和 profibus DP协议两者的区别和用途主要在哪里?相比好多工控人都有这个疑问。今天小编带大家一起学习一下。一、modbus协议和 profibus DP协议综述Modbus协议是应用于电子控制器上的一种通用语言。通过此协议,控制器相互之间、控制器经由网络…

python list转换成树形结构_python递归查询菜单并转换成json实例

最近需要用python写一个菜单,折腾了两三天才搞定,现在记录在此,需要的朋友可以借鉴一下。备注:文章引用非可执行完整代码,仅仅摘录了关键部分的代码环境数据库:mysqlpython:3.6表结构CREATE TAB…

oracle轮询方式循环输出,LGWR的两种模式(POST/WAIT和POLLING)

11.2之前,oracle的lgwr写入模式为post/wait11.2之后新增了polling模式,可以与post/wait模式自动切换通过隐藏参数 _use_adaptive_log_file_sync 参数来控制查看该隐藏参数的方法:SELECT x.ksppinm NAME, y.ksppstvl VALUE, x.ksppdesc descr…

ios上架图片在线制作_不同风格gif在线制作,公众号动态图片制作方法

现在运营公众号的主要方式就通过文章来进行宣传推广,在公众号文章中使用GIF动态图是非常常见的一种图片展现的方式,让文章整体效果看起来更加的生动有趣,所以很多的运营者在日常的工作和生活中会手机许多的动图素材,方便以后的使用…

python3.8学习_python3.8.1 入门基础学习 之 【字典】 学习

python3.8.1 入门基础学习 之 【字典】 学习字典是另一种可变容器模型,且可存储任意类型对象。字典的每个键值(key>value)对用冒号(:)分割,每个对之间用逗号(,)分割,整个字典包括在花括号({})中 ,格式如下所示:1、python3.8.1 …