IE hasLayout的问题总结(转载并修改)
2014-09-28 09:43
369 查看
介绍
这篇文章是一个总结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,那么你可以通过下面这些样式来搞定。
那些元素本身就有haslayout属性
element),
这个列表时不完善的。很多元素在微软的官方网站上没有提到,但是有一个方法很容易的测试到一个元素是否有layout,例如下代码:
<div
id="menu">
... </div>
为了检查这个div的haslayout属性值,我们可以在浏览器地址栏中输入如下代码:
javascript:alert(menu.currentStyle.hasLayout)
运行了这个代码之后就会反映出这个div的haslayout的属性值
如何设置haslayout
设置haslayout,换句话来说,就是给定一个相关的css样式。
以下css属性和值将给定一个元素haslayout属性
在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来修改它(我觉得应该是可以的,比如我通过设置zoom属性给某个元素加上了haslayout,但是用js把zoom属性去掉了那么haslayout还在吗?)。
我恨它
这听起来挺好的直到你碰到了一个bug并且把haslayout设置成true来解决。由于haslayout是只读的,所以不可能把它设置成一个false。幸运的是,ie的很多bug都是由于元素没有设置成haslayout:true。
bug
在我的经验中,ie下的80% 的bug都是由于元素没有haslayout。
IE hasLayout bugs经常出现各种很奇怪的问题,如果ie有些很难解释的问题,第一件事情要做的就是给该元素一个layout。
参考自:/article/4934757.html,原文有些翻译不正确的地方在自己理解的基础上已修正。
这篇文章是一个总结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,那么你可以通过下面这些样式来搞定。
那些元素本身就有haslayout属性
<html>,
<body>
<table>,
<tr>,
<th>,
<td>
<iframe>,
<embed>(non-standard
element),
<object>,
<applet>
<img>
<hr>
<input>,
<button>,
<select>,
<textarea>,
<fieldset>,
<legend>
<marquee>(don't ever use this one, non-standard and annoying)
这个列表时不完善的。很多元素在微软的官方网站上没有提到,但是有一个方法很容易的测试到一个元素是否有layout,例如下代码:
<div
id="menu">
... </div>
为了检查这个div的haslayout属性值,我们可以在浏览器地址栏中输入如下代码:
javascript:alert(menu.currentStyle.hasLayout)
运行了这个代码之后就会反映出这个div的haslayout的属性值
如何设置haslayout
设置haslayout,换句话来说,就是给定一个相关的css样式。
以下css属性和值将给定一个元素haslayout属性
position: absolute
float: leftor
right
display: inline-block
width: any value other than
auto
height: any value other than
auto
zoom: any value other than
normal(see description below)
writing-mode: tb-rl(see description below)
在ie7中, 也有一些属性 give "layout":
overflow: hiddenor
scrollor
auto
overflow-x: hiddenor
scrollor
auto
overflow-y: hiddenor
scrollor
auto
min-width: any value other than
auto
max-width: any value other than
auto
min-height: any value other than
auto
max-height: any value other than
auto
在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来修改它(我觉得应该是可以的,比如我通过设置zoom属性给某个元素加上了haslayout,但是用js把zoom属性去掉了那么haslayout还在吗?)。
我恨它
这听起来挺好的直到你碰到了一个bug并且把haslayout设置成true来解决。由于haslayout是只读的,所以不可能把它设置成一个false。幸运的是,ie的很多bug都是由于元素没有设置成haslayout:true。
bug
在我的经验中,ie下的80% 的bug都是由于元素没有haslayout。
IE hasLayout bugs经常出现各种很奇怪的问题,如果ie有些很难解释的问题,第一件事情要做的就是给该元素一个layout。
参考自:/article/4934757.html,原文有些翻译不正确的地方在自己理解的基础上已修正。
相关文章推荐
- 修改版本号解决“IE”无法重装的问题(转载)
- 【转载】IE hasLayout的问题总结
- firefox和ie js兼容问题 --总结得蛮全,转载过来一下
- 解决ie动态修改link样式,import css不刷新的问题
- (转载)修改删除目录操作之后,Session失效问题
- 【转载】IE中Iframe跨站引用时,框架内程序不能使用cookies问题解决
- 手工修改注册表修复IE各种问题
- 解决IE被恶意修改方法总结
- 在开发过程中总结了一些IE和Firefox的兼容问题。
- 【转载】EXCEL中条码问题:条形码能插入,但只有一种类型,数字不能改,修改属性后也不显示
- 解决ie动态修改link样式,import css不刷新的问题
- 一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
- SQL SERVER中一些常见性能问题的总结(转载)
- ie项目修改大全!所有的ie问题都来这里看吧!
- 【转载】同事对项目UI问题案例分析培训的总结
- js IE/FF 兼容问题总结
- 安装wind2003后,打开SharePoint网站IE每次都要login。修改IE设置后解决此问题
- [转载]Javascript的IE和Firefox兼容性问题集合
- ie项目修改大全!所有的ie问题都来这里看吧!
- 修改IE以文本格式打开下载文件的问题