投递文章投递文章 投稿指南 RSS订阅RSS订阅

不一样的蚊子详解IE Haslayout

来源:IT堂 不一样的蚊子 发布时间:2010-04-17 收藏 投稿 字体:【

IE的haslayout是个很纠结的东西,掌握好CSS就得掌握好它。初学CSS时走了很多弯路,以下几篇文章在我的学习中起了很大的作用,希望能让大家受益。

此文是和老包共同弄的,参考了On have layout

另外两篇文章摘自CSS Mastery【精通CSS】,与此文相互补充,希望对大家有帮助

拥有layout概述

Internet Explorer 中有很多奇怪的渲染问题可以通过赋予其”layout”得到解决。John Gallant 和 Holly Bergevin 把这些问题归类为”尺寸BUG(dimensional bugs)”[32],意思是这些BUG可以通过赋予相应元素某个宽度或高度解决。

“Layout”是一个 Internet Explorer for Windows的私有概念,它决定了一个元素如何显示以及约束其包含的内容、如何与其他元素交互和建立联系、如何响应和传递应用程序事件、用户事件等。这种渲染特性可以通过某些 CSS 属性被不可逆转地触发。而有些 HTML 元素则默认就具有”layout”。

微软的开发者们认为元素都应该可以拥有一个”属性(property)”(这是面向对象编程中的一个概念),于是他们便使用了 hasLayout,这种渲染特性生效时也就是将 hasLayout 设成了 true 之时。了解hasLayout将对IE的BUG会有更多深入的体会甚至解决方案。

拥有layout的定义

一个元素”得到 layout”,或者说一个元素”拥有 layout” 的时候,是指它的微软专有属性 hasLayout 为此被设为了 true 。一个”layout元素”可以是一个默认就拥有 layout 的元素或者是一个通过设置某些 CSS 属性得到 layout 的元素。
而”无layout元素”,是指 hasLayout 未被触发的元素,比如一个未设定宽高尺寸的干净 div 元素就可以做为一个”无layout祖先”。

给一个默认没有 layout 的元素赋予 layout 的方法包括设置可触发 hasLayout = true 的 CSS 属性。参考默认 layout 元素以及这些属性列表。没有办法设置 hasLayout = false , 除非把一开始那些触发 hasLayout = true 的 CSS 属性去除或重置。

拥有layout的各种问题

Layout 在显示盒模型时有着不同寻常而且难以预料的效果,而且有时甚至会牵连到他们的子元素。

一个元素是否具有”layout”可能会引发如下的一些问题(包括但不限于):

  • IE 很多常见的浮动BUG。
  • 元素本身对一些基本属性的异常处理问题。
  • 容器和其子孙之间的空白边重叠问题。
  • 使用列表时遇到的诸多问题。
  • 背景图像的定位偏差问题。
  • 使用脚本时遇到的浏览器之间处理不一致的问题。

Layout 的由来

不同于标准属性,也不像某些浏览器的私有 CSS 属性,layout 无法通过某一个 CSS 声明直接设定 。也就是说没有”layout属性”这么一个东西,元素要么本身自动拥有 layout,要么借助一些 CSS 声明悄悄地获得 layout。

下列元素应该是默认具有 layout 的:

  • <html>, <body>
  • <table>, <tr>, <th>, <td>
  • <img>
  • <hr>
  • <input>, <button>, <select>, <textarea>, <fieldset>, <legend>
  • <iframe>, <embed>, <object>, <applet>
  • <marquee>

顶一下
(2)
100%
踩一下
(0)
0%
本文Tags:
  • 表情:
  •    
  • 评价:
用户名: 密码: 匿名 注册
最新评论 查看所有评论
About iTtang - 联系我们  - 专题列表 - 友情链接  -  高级搜索  -  帮助中心  -  您的意见