我们都知道ie浏览器和其他一些浏览器有很多表现不同的地方,这确实让人头疼,ie的表现与其他浏览器不同的原因之一就是我们今天要说的这个熟悉又陌生的东西:layout是一个专门针对显示引擎内部工作方式的概念(听起来好像很官方),布局问题是许多ie显示bug的根源。

另外在清除浮动的时候也经常提出触发haslayout,关于清除浮动的内容,戳这里!

windows上的ie使用布局概念减少它的处理开销。在理想情况下,所有元素都控制自己的尺寸和定位,但是在ie中不是全部的元素都可以控制自己的尺寸和定位,当然,这并不是没有原因的,官方给出的解释是:这样会在ie中导致很大的性能问题,ie开发团队决定只将布局应用于实际需要它的那些元素,这样就可以充分地减少性能的开销。

如果一个元素“没有拥有布局”,那么它的尺寸和位置由最近拥有布局的祖先元素控制。  ( 拥有了布局的元素会表现会矩形 )

在默认情况下,ie中本身自己就拥有布局的元素包括:

  • body
  • html(标准模式)
  • table
  • tr、td
  • img
  • hr
  • input、select、textarea、button
  • iframe、embed、object、applet
  • marquee

布局的概念是ie特有的,他不是css属性,但是可以通过javascript获取到hasLayout,这是一个只读属性,不可以设置,所以我们不能用js来设置这个属性。

但是我们可以通过设置一些css属性来使没有拥有布局的元素自动拥有布局,我们可以通过设置下面这些属性:

  • float: left|right;
  • display: inline-block;
  • width: any;
  • height:any;
  • zoom:any;           //  用zoom来触发haslayout的扩展内容,戳这里!
  • writing-mode:tb-rl;

在ie7中以下的属性也成了布局触发器。

  • overflow: hidden、scroll、auto
  • min-width: any
  • max-widht: 除了none以外的任何值

ie8已经放弃了hasLayout属性,最后在张鑫旭的博客中我看到了一些对layout的不同见解(传送门

ie下的布局(layout)和拥有布局(hasLayout)的更多相关文章

  1. Magento的布局(Layout),块(Block)和模板(Template)

    public function indexAction() { //remove our previous echo //echo 'Hello Index!'; $this->loadLayo ...

  2. Android Studio分类整理res/Layout中的布局文件(创建子目录)

    res/layout中的布局文件太杂,没有层次感,受不了的我治好想办法解决这个问题. 前几天看博客说可以使用插件分组,可惜我没找到.知道看到另一篇博客时,才知道这个方法不能用了. 不能用插件,那就手动 ...

  3. Duilib源码分析(五)UI布局—Layout与各子控件

    接下来,继续分析duilib之UI布局Layout,目前提供的布局有:VerticalLayout.HorizontalLayout.TileLayout.TabLayout.ChildLayout分 ...

  4. Best Practices for Performance_3.Improving Layout Performance 优化布局

    http://developer.android.com/training/improving-layouts/index.html 1. 优化布局层次 1)  每增加一个View或者布局,都会增加额 ...

  5. android 分区layout以及虚拟内存布局-小结

    摘要 简述启动过程的内存分配,各个映像的烧写,加载,logo的刷新,文件系统mount. DRAM:外部RAM: ISRAM:内部RAM(128K),(PL会跑在ISRAM里面,去初始化DRAM,lo ...

  6. [转]struct实例字段的内存布局(Layout)和大小(Size)

    在C/C++中,struct类型中的成员的一旦声明,则实例中成员在内存中的布局(Layout)顺序就定下来了,即与成员声明的顺序相同,并且在默认情况下总是按照结构中占用空间最大的成员进行对齐(Alig ...

  7. Extjs布局——layout: 'card'

    先看下此布局的特性: 下面演示一个使用layout: 'card'布局的示例(从API copy过来的)——导航面板(注:导航面板切换下一个或上一个面板实际是导航面板的布局--layout调用指定的方 ...

  8. Android Studido下的应用性能优化总结--布局优化

    前言:一个应用的成功=产品设计*性能 ,再此我们不讨论一个应用的设计,那交给我们可爱又可恨的产品经理和UI设计师来决定!所以这里分步骤讨论如何提升一个应用的性能,这里先探讨布局优化问题. 布局优化 避 ...

  9. 寒假学干货之------初步布局Layout

    在开发的最初,需要设计好我们的Activity,在res/layout下,找到**activitymian(名字都差不多的)的.xml文件,打开他就可以开始编辑. http://www.tuicool ...

随机推荐

  1. 1-1:CSS3课程入门之属性选择器

    div[name=jewave] 选取属性名为name且属性值是"jewave"的元素 div[name^=jewave]选取属性名为name且属性值以"jewave&q ...

  2. Koa2+MySQL+VUE+ElementIUI搭建简单的后台管理小系统

    如题,前端入坑许久,还是写个小东西出来吧 想要搭建自己的一个后台管理,实现简单的增删改查,看起来很简单 其实是真的简单,没有想的那么难,我也就写了一个月吧, 当然是假的,其实也就每天一两个小时,花了大 ...

  3. 【PHP开发】用curl向https发请求时的35号错误

    放了个假发现以前写的程序的模拟登陆不管用了,中间输出,发现curl向https发请求时没有返回数据,输出错误信息,得到: curl_errno($ch) -----> 35 curl_error ...

  4. A charge WIFI point base on airbase-ng+dhcp+lamp+wiwiz

    Make wifi as a hot point Make a script echo $0 $1 case $1 in "start") sleep 1 ifconfig wla ...

  5. 导出到Excel中NPOI

    源地址:http://www.cnblogs.com/dreamof/archive/2010/06/02/1750151.html\ 1.NPOI官方网站:http://npoi.codeplex. ...

  6. BZOJ3878: [Ahoi2014&Jsoi2014]奇怪的计算器

    BZOJ3878: [Ahoi2014&Jsoi2014]奇怪的计算器 Description [故事背景] JYY有个奇怪的计算器,有一天这个计算器坏了,JYY希望你能帮助他写 一个程序来模 ...

  7. 我的Java开发学习之旅------>在Dos环境下Java内部类的编译和运行

    习惯了在IDE工具上进行代码编写,连最基本的Javac命令和Java命令都忘记的差不多了,今天对一个Java内部类进行编译和运行的时候,就出糗了.IDE是把双刃剑,它可以什么都帮你做了,你只要敲几行代 ...

  8. UVa 10828 Back to Kernighan-Ritchie 高斯消元+概率DP

    题目来源:UVa 10828 Back to Kernighan-Ritchie 题意:从1開始 每次等概率从一个点到和他相邻的点 有向 走到不能走停止 求停止时每一个点的期望 思路:写出方程消元 方 ...

  9. 支付宝异步通知notify_url接收不了问题解决(转)

    此处return_url可以成功跳转回网站页面但notify_url却接收不到支付宝的异步通知.已保证notify_url是一个外网可以访问的网址 1.网站用的是ssh框架,当支付宝发通知到我这个ac ...

  10. vi中如何替换某字符成“回车”?

    vi中如何替换某字符成“回车”? 在 vi 中::s/,/^M/g (you need to type CTRL-V <CR> to get a ^M here)VIM - Vi IMpr ...