<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>WEB前端开发 &#187; hasLayout</title>
	<atom:link href="http://www.css88.com/archives/tag/haslayout/feed" rel="self" type="application/rss+xml" />
	<link>http://www.css88.com</link>
	<description>专注前端开发，关注用户体验</description>
	<lastBuildDate>Mon, 06 Feb 2012 13:31:04 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>haslayout引起的IE6 :hover失效</title>
		<link>http://www.css88.com/archives/1335</link>
		<comments>http://www.css88.com/archives/1335#comments</comments>
		<pubDate>Tue, 26 May 2009 16:51:41 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[html+css]]></category>
		<category><![CDATA[:hover]]></category>
		<category><![CDATA[hasLayout]]></category>
		<category><![CDATA[IE6]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=1335</guid>
		<description><![CDATA[大家都知道IE6之支持&#60;a&#62;标签的:hover为了，但是通常在做实际效果的时候&#60;a&#62;标签 :hover在IE6下会失效， 看代码： &#60; !DOCTYPE html PUBLIC &#34;-//W3C//DTD XHTML 1.0 Transitional//EN&#34; &#34;&#60;a href=&#34;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&#34;&#62;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&#34;&#62; &#60;html xmlns=&#34;&#60;a href=&#34;http://www.w3.org/1999/xhtml&#34;&#62;http://www.w3.org/1999/xhtml&#34;&#62; &#60;head&#62; &#60;meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=utf-8&#34; /&#62; &#60;title&#62;无标题文档&#60;/title&#62; &#60;style type=&#34;text/css&#34;&#62; a:hover { } a:hover span{color:#F00;} &#60;/style&#62; &#60;/head&#62; &#60;body&#62; &#60;a href=&#34;#&#34;&#62;鼠标经过时改变我的&#60;span&#62;颜色&#60;/span&#62;&#60;/a&#62; &#60;/body&#62; &#60;/html&#62; 在IE6下“颜色”根本就不会变成红色，其他浏览器都是好的，要解决这个问题就必须触发a:hover的layout，例如a:hover { display:inline-block}或者a:hover { zoom:1}等等。 声明: 本文采用 BY-NC-SA 协议进行授权 &#124; WEB前端开发转载请注明转自《haslayout引起的IE6 :hover失效》]]></description>
		<wfw:commentRss>http://www.css88.com/archives/1335/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>【转载】haslayout综合</title>
		<link>http://www.css88.com/archives/1298</link>
		<comments>http://www.css88.com/archives/1298#comments</comments>
		<pubDate>Fri, 22 May 2009 18:32:36 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[html+css]]></category>
		<category><![CDATA[hasLayout]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=1298</guid>
		<description><![CDATA[原文地址：http://www.qianduan.net/comprehensive-haslayout.html 要想更好的理解 css， 尤其是 IE 下对 css 的渲染，haslayout 是一个非常有必要彻底弄清除的概念。大多 IE 下的显示错误，就是源于 haslayout。 什么是 haslayout ？ haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在Internet Explorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当一个元素的 hasLayout 属性值为true时，我们说这个元素有一个布局（layout） 当一个元素有一个布局时，它负责对自己和可能的子孙元素进行尺寸计算和定位。简单来说，这意味着这个元素需要花更多的代价来维护自身和里面的内容，而不是依赖于祖先元素来完成这些工作。因此，一些元素默认会有一个布局。当我们说一个元素“拥有layout”或“得到layout”，或者说一个元素“has layout” 的时候，我们的意思是指它的微软专有属性 hasLayout 被设为了 true 。一个“layout元素”可以是一个默认就拥有 layout 的元素或者是一个通过设置某些 CSS 属性得到 layout 的元素。如果某个HTML元素拥有 haslayout 属性，那么这个元素的 haslayout 的值一定只有 true，haslayout 为只读属性 一旦被触发，就不可逆转。通过 IE Developer Toolbar 可以查看 IE 下 HTML 元素是否拥有haslayout，在 IE Developer Toolbar [...]]]></description>
		<wfw:commentRss>http://www.css88.com/archives/1298/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>【转载】拥有布局 IE haslayout</title>
		<link>http://www.css88.com/archives/1295</link>
		<comments>http://www.css88.com/archives/1295#comments</comments>
		<pubDate>Fri, 22 May 2009 18:29:13 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[html+css]]></category>
		<category><![CDATA[hasLayout]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=1295</guid>
		<description><![CDATA[原文：http://adamghost.com/2009/03/ie-has-layout-and-bugs-zh/ 找们那知道浏览器有bug，而且Windows上的lE的bug 似乎比太多数浏览器都多。IE/Win的衣现与其他浏览器不同的原因之一是，显示引擎使用一个称为布局(layout)的内部概念。因为布均是一个专门针对显示引擎内部工作方式的概念，所以一般悄况下不需要了解它。但是，布局问题是许多IE/Win显示bug的根源，所以理解这个概念以及它如何影响CSS是有捂助的。 什么是布局 Windows 上的IE 使用布局概念来控制元素的尺寸和定位。那些称为拥有布局(have layout)的元素负责本身及其子元素的尺寸和定位。如果一个元旦在没有拥有布局，那么它的尺寸和位置由最近的拥有布局的祖先元素控制。 IE 显示引擎利用布局概念减少它的处理开销。在理想悄况下，所有元素都控制自己的尺寸和定位。但是，这会在IE中导致很大的性能问题。因此，IE/Win 开发团队决定只将布局应用于实际需要它的那些元素，这样就可以充分地减少性能开销。 在默认情况下拥有布局的元素包括: body 标准模式中的 html table tr, td img hr input, select, textarea, button iframe, embed, object, applet marquee 布局概念是Windows 上的I E 特有的，而且它不是CS S 属性.尽管某些CSS 属性会使元ffi拥有布局，但是在CSS 巾无法显式地设宣布局.可以使用JavaScript 函数hasLayout 查看一个元亲是否拥有布局.如果元素拥有布局，这个函数就返回true ; 否则返回falseo hasLayout 是一个只读属性，所以无法使用JavaScript 选行设置. 设宜以下CSS 属性会自动地使元亲拥有布局· position: absolute float: left or right display: inline-block width: [...]]]></description>
		<wfw:commentRss>http://www.css88.com/archives/1295/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>【转载】On having layout</title>
		<link>http://www.css88.com/archives/1292</link>
		<comments>http://www.css88.com/archives/1292#comments</comments>
		<pubDate>Fri, 22 May 2009 18:27:09 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[html+css]]></category>
		<category><![CDATA[hasLayout]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=1292</guid>
		<description><![CDATA[这篇文章太好了，出处：http://old9.blogsome.com/2006/04/11/onhavinglayout 译者注：一篇很好的文章，很久以前在blog上就推荐过，这两天断断续续花了点时间翻译了一下，推荐读读。 英文原文在此。 http://www.satzansatz.de/cssd/onhavinglayout.htm 文中所有的 layout 这个单词都未作翻译，一来本身这个单词意思就比较多，翻成啥都觉得别扭，二来它也是专有的属性，所以就意会一下吧。水平有限，很多地方都是模模糊糊地意译，发现错误欢迎留言指出。 引用一段来自Dean Edwards 的评价： I recommend that every CSS designer and DOM scripter read this. Understanding “layout” gives a huge insight into lots of other IE bugs and idiosyncrasies. (Dean Edwards) 4月16日修订的内容： 将quirks模式这一部分单独移动到一篇文章中讲述。 添加：边缘裁切。 添加：收缩包围(shrink-wrapping)现象。 5月17日修订的内容： 重写了了浮动元素旁边的元素这一部分。 部分章节小的修正：属性，有关内联级别元素，CSS hacks。 重新整理了部分章节的语言：定义，数据，问题种种，分析，清除浮动和自动扩展适应高度，绝对定位元素。 On having layout 本文修订中 当前版本：Rev. 7 2006–05–17 http://www.satzansatz.de/cssd/onhavinglayoutrev07-20060517.html 修订历史 [...]]]></description>
		<wfw:commentRss>http://www.css88.com/archives/1292/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>【转载】IE hasLayout详解</title>
		<link>http://www.css88.com/archives/1288</link>
		<comments>http://www.css88.com/archives/1288#comments</comments>
		<pubDate>Fri, 22 May 2009 18:18:48 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[html+css]]></category>
		<category><![CDATA[hasLayout]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=1288</guid>
		<description><![CDATA[网上转载过来的文章，都不知到谁是真正的作者和翻译者了，但在这里让我们感谢作者和翻译者，共享万岁！ 注：hasLayout已经被IE8淘汰。 &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212; IE的haslayout是个很纠结的东西，掌握好CSS就得掌握好它。初学CSS时走了很多弯路，以下几篇文章在我的学习中起了很大的作用，希望能让大家受益。 拥有layout概述 Internet Explorer 中有很多奇怪的渲染问题可以通过赋予其”layout”得到解决。John Gallant 和 Holly Bergevin 把这些问题归类为”尺寸臭虫(dimensional bugs)”[32]，意思是这些臭虫可以通过赋予相应元素某个宽度或高度解决。 “Layout”是一个 Internet Explorer for Windows的私有概念，它决定了一个元素如何显示以及约束其包含的内容、如何与其他元素交互和建立联系、如何响应和传递应用程序事件、用户事件等。这种渲染特性可以通过某些 CSS 属性被不可逆转地触发。而有些 HTML 元素则默认就具有”layout”。 微软的开发者们认为元素都应该可以拥有一个”属性(property)”(这是面向对象编程中的一个概念)，于是他们便使用了 hasLayout，这种渲染特性生效时也就是将 hasLayout 设成了 true 之时。了解hasLayout将对IE的臭虫会有更多深入的体会甚至解决方案。 拥有layout的定义 一个元素”得到 layout”，或者说一个元素”拥有 layout” 的时候，是指它的微软专有属性 hasLayout 为此被设为了 true 。一个”layout元素”可以是一个默认就拥有 layout 的元素或者是一个通过设置某些 CSS 属性得到 layout 的元素。 而”无layout元素”，是指 hasLayout 未被触发的元素，比如一个未设定宽高尺寸的干净 div 元素就可以做为一个”无layout祖先”。 给一个默认没有 layout 的元素赋予 layout 的方法包括设置可触发 hasLayout [...]]]></description>
		<wfw:commentRss>http://www.css88.com/archives/1288/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

