圆月山庄资源网

详解IE浏览器的haslayout属性及相关兼容性问题解决
网页制作 2024/12/23 佚名
3 2
圆月山庄资源网 Design By www.vgjia.com

IE，这个令所有网站设计人员讨厌，但又不得不为它工作的浏览器。不论是6、7还是8，它们都有一个共同的渲染标准haslayout，所以haslayout 是一个非常有必要彻底弄清除的概念。大多 数IE下的显示错误，就是源于它。

什么是Layout呢？
"Layout" 是 IE 的一个私有属性，并不是W3C标准。它决定了一个对象（就是一个标签div、li等）在内容中如何显示、与周围对象的位置关系、以及怎样响应程序或用户产生的事件。

这个属性可以被一些css强制激活。一些HTML标签默认具有haslayout。
PS：一个对象的layout属性被激活，它的具体表现就是haslayout=true。我们可以用IE Developer Toolbar工具看到被激活的对象带有"haslayout = -1"的属性。

下面这些标签默认拥有haslayout属性：

XML/HTML Code复制内容到剪贴板
  1. <html>, <body>  
  2. <table>, <tr>, <th>, <td>  
  3. <img>  
  4. <hr>  
  5. <input>, <button>, <select>, <textarea>, <fieldset>, <legend>  
  6. <iframe>, <embed>, <object>, <applet>  
  7. <marquee>  

你可能就问：微软干嘛要设layout这个东西呢？当一个对象的layout被激活时，它以及它的子对象的定位和尺寸计算将独立进行，不受附近对象 的干扰。也就是说它拥有一个独立的布局（layout）。因此浏览器要花费更多的代价来处理拥有haslayout的对象。为了提高性能，微软增加了 layout这个IE私有的概念。

怎样激活layout？
下面列出的css属性可以激活对象的layout：

CSS Code复制内容到剪贴板
  1. position: absolute  

设置绝对定位可能会引发新的问题。

CSS Code复制内容到剪贴板
  1. float: left|rightright  

IE下的浮动也会产生一些莫名其妙的问题。

CSS Code复制内容到剪贴板
  1. display: inline-block  

当一个内联元素需要haslayout属性时就需要用它，但是IE本身不支持inline-block的，只是表现得像标准里说的inline-block。
1.width: 除'auto'外的任意值
优先考虑使用该属性。
2.height: 除'auto'外的任意值
对 IE6 及更早版本来说很常用，该方法被称为霍莉破解(Holly hack)，即设定这个元素的高度为 1% (height:1%;)。但是要注意，当这个元素的 overflow 属性被设置为 visible 时，这个方法就失效了。
3.zoom: 除'normal'外的任意值
又一个ie私有属性，不兼容标准。zoom:1可以在测试或者不追求标准的情况下使用，效果不错。

CSS Code复制内容到剪贴板
  1. writing-mode: tb-rl  

ie私有属性，不推荐用。
IE7 还有一些额外的属性：

1.min-height: (任意值)
2.max-height: (除 none 外任意值)
3.min-width: (任意值)
4.max-width: (除 none 外任意值)
5.overflow: (除 visible 外任意值)
6.overflow-x: (除 visible 外任意值)
7.overflow-y: (除 visible 外任意值)
8.position: fixed

重置haslayout
在没有其它属性激活layout的情况下，使用下面的css可以重置haslayout属性：

1.width, height (设为 "auto")
2.max-width, max-height (设为 "none")(在 IE 7 中)
3.position (设为 "static")
4.float (设为 "none")
5.overflow (设为 "visible") (在 IE 7 中)
6.zoom (设为 "normal")
7.writing-mode (从 "tb-rl" 设为 "lr-t")
display 属性的不同：当用"inline-block"激活了haslayout 属性时，就算在一条独立的规则中覆盖这个属性为"block"或"inline"，haslayout 这个标志位也不会被重置为 false。

把 mid-width, mid-height 设为它们的默认值"0"仍然会赋予 hasLayout，但是 IE 7 却可以接受一个不合法的属性"auto"来重置 hasLayout。

触发 hasLayout 清除浮动
样例：

CSS Code复制内容到剪贴板
  1. haslayout-clear-float:{width:1px}  

或

CSS Code复制内容到剪贴板
  1. .haslayout-clear-float:{height:1px}  

或

CSS Code复制内容到剪贴板
  1. .haslayout-clear-float:{zoom:1}  

'Layout' 是 IE 的专有概念，它决定了元素如何对其内容进行定位和尺寸计算，与其他元素的关系和相互作用，以及对应用还有使用者的影响。

'Layout' 可以被某些 CSS property（特性）不可逆的触发，而某些 HTML 元素本身就具有 layout 。

'Layout' 在 IE 中可以通过 hasLayout 属性来判断一个元素是否拥有 layout ，如 object.currentStyle.hasLayout 。

'Layout' 是 IE 浏览器渲染引擎的一个内部组成部分。在 IE 浏览器中，一个元素要么自己对自身的内容进行组织和计算大小， 要么依赖于包含块来计算尺寸和组织内容。为了协调这两种方式的矛盾，渲染引擎采用了 'hasLayout' 属性，属性值可以为 true 或 false。 当一个元素的 'hasLayout' 属性值为 true 时，我们说这个元素有一个布局（layout），或拥有布局。

标签：
IE，haslayout
圆月山庄资源网 Design By www.vgjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com
www.vgjia.com 圆月山庄资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接