zoukankan      html  css  js  c++  java
  • IE hasLayout的问题总结

    这篇文章是翻译http://haslayout.net/haslayout这篇英文的。写的挺好的。

    介绍 

    这篇文章是一个总结haslayout的文章。

    更新:haslayout在ie8的标准模式下已经被废弃了,但是在ie7的兼容版本以及以下的版本是仍然存在的。

    什么是haslayout? 

    MSIE  有一个很早很早,过时的渲染引擎 Mosaic . 在表格布局的时代。几乎是所有的元素(除了内联内容)都是一个盒子。内容几乎不可能超过表格的

    单元格。表格的单元格不可能超出表格。

    很多年过去了。微软开始采用Trident engine 来使用CSS,但是,CSS改变了最初的这个古老引擎的假设(最重要的一点就是任何元素都会包含它的内容)。

    但是CSS允许内容超出元素(就是内容浮动的时候,或者内容太高、宽去适应包含盒子)

     haslayout是怎么来的?

    为了解决这个问题,微软的天才coder决定去修理他们的这个古老的引擎,因此haslayout这个属性就诞生了。每个元素都有haslayout这个属性去设置true

    或者false,如果它设置成了true,它就不得不去渲染它自己,因此元素不得不扩展去包含它的流出的内容。例如浮动或者很长很长的没有截断的单词,如果

    haslayout没有被设置成true,那么元素得依靠某个祖先元素来渲染它。这就是很多的ie bugs诞生的地方。

    haslayout不是一个CSS属性,你不能这样的来设置它 haslayout:true;一个元素被设置成haslayout:true将被渲染成一个 having haslayout,反之。

    那些元素本身就有haslayout属性

     这个列表时不完善的。很多元素在微软的官方网站上没有提到,但是有一个方法很容易的测试到一个元素是否有layout,例如下代码:

    <div id="menu"> ... </div>

    为了判断这个div的haslayout属性值,我们可以在浏览器地址栏中输入如下代码:

    javascript:alert(menu.currentStyle.hasLayout) 

     运行了这个代码之后就会反映出这个div的haslayout的属性值

    如何设置haslayout 

    设置haslayout,换句话来说,就是给定一个布局,相对来说比haslayout等于false要简单。

    以下属性和值将给定一个元素布局

    在ie7中, 也有一些属性 give "layout":

     在ie8的标准模式中,微软已经废弃了haslayout属性了,但是在ie7的兼容模式中,仍然存在着这个属性。

    你可能对zoom 和write-mode这2个属性不太熟悉,他们都是微软的扩展属性。他们仅仅在ie中有效并且将来可能无效,因此我建议你把他们放入condcoms 

     write-mode属性在css3技术文档中已经出现了。zoom可能被提议,但是目前还没有。

    zoom:1作者认为是最好的触发haslayout属性的组合,因为它对房前元素没有一点影响。

    write-mode 就是字体排版布局的方式。

    设置display:inline-block没有移除布局,这个技巧可以给元素设置成haslayout:true;

    它相当于 

    div { display: inline-block; } div { display: block; }

     设置contenteditable也给一个元素设置成了haslayout:true。例如:<p contenteditable="true">so lame</p>

    你可能从来不用它来设置haslayout:true,写在这里只是为了一个信息的目的。不仅contenteditable是微软的一个属性,而且他还可以允许用户

    编译元素的内容。这点有可能使用户困惑。

    hasLayout 是一个可读的属性,不能通过js来修改它。

    我恨它 

     这听起来挺好的直到你碰到了一个bug并且把haslayout设置成true来解决。由于haslayout是可读的,所以不可能把它设置成一个false。幸运的

    是,ie的很多bug都是由于元素没有设置成haslayout:true。

    bug 

     在我的经验中,ie下的80% 的bug都是由于元素没有haslayout

     IE hasLayout bugs经常出现各种很奇怪的问题,如果ie有些很难解释的问题,第一件事情要做的就是给该元素一个layout。

    ---------END---------- 

  • 相关阅读:
    Java_JAVA6动态编译的问题
    Java_动态加载类(英文)
    Java_Java Compiler 应用实例
    Java_关于App class loader的总结
    Java_动态加载
    Java_Java SE6调用动态编译
    python捕获Ctrl+C信号
    python使用协程并发
    python使用多进程
    python使用多线程
  • 原文地址:https://www.cnblogs.com/yupeng/p/2012996.html
Copyright © 2011-2022 走看看