Fork me on GitHub

IE7 浏览器下面设置text-indent属性变成margin属性BUG

问题来源

今天做项目的时候发现了一个问题，在使用text-indent属性对元素进行缩进是发现在360浏览器下发生了元素偏移，跟margin-left的效果一样，打开f12发现3607.1浏览采用的ie7.0的文档模式，果然在ie7里面测试是一样的结果

IE7下效果

 

 

其他浏览器下效果

之所以这样是因为ie6、7浏览器不支持display属性的inline-block值，你设置了也会忽视，而恰巧我的页面中的元素就使用了display:inline-block属性，但是在ie7看来就是inline ，但hiie6，7有haslayout属性。就是说ie6，7中的inline元素有个特殊的情况，就是触发了ie的hasLayout属性以后就拥有了layout。此时inline元素的表现和标准浏览器里面的inline-block元素基本相同。我们用ie的私有属性zoom来触发hasLayout，然后看看inline元素的表现。

 display:inline-block;
 *display:inline;
 *zoom:1;

可以采用此种办法触发layout使其实现inline-block 当然也可以直接使用block属性

display:inline-block;
*display:block;

 

下面转载了关于layout的介绍

 

什么是 haslayout ？　　

　　“Layout”是一个 IE/Win 的私有概念，它决定了一个元素如何显示以及约束其包含的内容、如何与其他元素交互和建立联系、如何响应和传递应用程序事件/用户事件等，这有点类似于一个窗体的概念。微软的开发者们认为盒状元素(box-type elements)应该具有一个“属性(property)”(这是面向对象编程中的一个概念)，于是他们便使用了 layout , 也就是 hasLayout。hasLayout 其实既不是一个属性更不是一个行为，而是 IE 这个渲染引擎代代继承一贯拥有的一个渲染概念，在这个概念下渲染的元素将具有一种特性。实际上这种渲染特性在有些 HTML 元素中与身俱来，而在另外一些元素中也可以通过一些 CSS 属性将其触发为 true ，且一旦触发将不可逆转。

　　当我们说一个元素“拥有layout”或“得到layout”，或者说一个元素“has layout” 的时候，我们的意思是指它的微软专有属性 hasLayout 被设为了 true 。一个“layout元素”可以是一个默认就拥有 layout 的元素或者是一个通过设置某些 CSS 属性得到 layout 的元素。而“无layout元素”，是指 hasLayout 未被触发的元素，比如一个未设定宽高尺寸的干净 div 元素就可以做为一个 “无layout祖先”。给一个默认没有 layout 的元素赋予 layout 的方法包括设置可触发 hasLayout = true 的 CSS 属性。参考默认 layout 元素以及这些属性列表。没有办法设置 hasLayout = false ， 除非把一开始那些触发 hasLayout = true 的 CSS 属性去除。IE Developer Toobar 可以实时检查一个元素的当前样式；如果 hasLayout 是 true ，那么它的值显示为 “-1”。 我们可以通过实时修改一个元素的属性将“zoom(css)”设置为“1”来触发 hasLayout 以便调试。另外可以用javascript获取hasLayout的状态，<script>alert(my.currentStyle.hasLayout);</script>，但是不可以设置。

　　另外一个需要注意的是“layout”会影响javascript编程。如果一个元素没有“layout”，那么clientWidth/clientHeight 总是返回0。这会让一些脚本新手感到困惑，而且这和 Mozilla 浏览器的处理方式也不一样。不过我们可以利用这一点在 IE5.0 中检测“layout”：如果 clientWidth 是零那么这个元素就没有 layout。

  

 什么情况下hasLayout会出现？

　　实际上一般情况都不会出现的，当然除了使用下面默认具有hasLayout的元素或使用特定样式触发hasLayout以外；它会带来各种诡异表现，当你发现IE6 IE7出现了一些不可思议的问题，首先要检查的就是是否是hasLayout在捣鬼；hasLayout只出现在IE7及更早版本中，IE8之后不存在hasLayout解析模式。

 默认具有 haslayout 的元素（不完全列表）
　　* html, body
　　* table, tr, th, td
　　* img
　　* hr
　　* input, button, file, select, textarea, fieldset
        * legend
　　* marquee
　　* frameset, frame, iframe
　　* objects, applets, embed
　　对于并非所有的元素都默认有布局，微软给出的主要原因是“性能和简洁”。如果所有的元素都默认有布局，会对性能和内存使用上产生有害的影响。

如何激发 haslayout？

　　大部分的 IE 显示错误，都可以通过激发元素的 haslayout 属性来修正。可以通过设置 css 尺寸属性(width/height)等来激发元素的 haslayout，使其“拥有布局”。如下所示，通过设置以下 css 属性即可。
　　* display: inline-block
　　* height: (任何值除了auto) 通常用 _height:1%;解决IE6的问题，height:1%不会改变实际高度
　　* float: (left 或 right)
　　* position: absolute
　　* width: (任何值除了auto)
　　* writing-mode: tb-rl
　　* zoom: (除 normal 外任意值)
　　IE7 还有一些额外的属性(不完全列表):
　　* min-height: (任意值)
　　* max-height: (除 none 外任意值)
　　* min-width: (任意值)
　　* max-width: (除 none 外任意值)
　　* overflow: (除 visible 外任意值)
　　* overflow-x: (除 visible 外任意值)
　　* overflow-y: (除 visible 外任意值)
　　* position: fixed
　　其中 overflow-x 和 overflow-y 是 css3 盒模型中的属性，目前还未被浏览器广泛支持。
　　对于内联元素(默认即为内联的元素，如 span，或 display:inline; 的元素)，width 和 height 只在 IE5.x 下和 IE6 或更新版本的 怪异 quirks 模式下触发 hasLayout 。而对于IE6，如果浏览器运行于标准兼容模式下，内联元素会忽略 width 或 height 属性，所以设置 width 或 height不能在此种情况下令该元素具有 layout。
　　zoom 总是可以触发 hasLayout，但是在 IE5.0 中不支持。
　　具有“layout” 的元素如果同时 display: inline ，那么它的行为就和标准中所说的 inline-block很类似了：在段落中和普通文字一样在水平方向连续排列，受 vertical-align 影响，并且大小可以根据内容自适应调整。这也可以解释为什么单单在 IE 中内联元素可以包含块级元素而少出问题，因为在别的浏览器中display: inline 就是内联，不像 IE 一旦内联元素拥有 layout 还会变成 inline-block。
　　haslayout 问题的调试与解决
　　当网页在 IE 中有异常表现时，可以尝试激发 haslayout 来看看是不是问题所在。常用的方法是给某元素 css 设定 zoom:1。使用 zoom:1 是因为大多数情况下，它能在不影响现有环境的条件下激发元素的 haslayout。而一旦问题消失，那基本上就可以判断是haslayout 的原因。然后就可以通过设定相应的 css 属性来对这个问题进行修正了。建议首先要考虑的是设定元素的width/height 属性，其次再考虑其他属性。
　　对 IE6 及更早版本来说，常用的方法被称为霍莉破解(Holly hack)，即设定这个元素的高度为 1%(height:1%;)。需要注意的是，当这个元素的 overflow 属性被设置为 visible 时，这个方法就失效了。或者使用 IE的条件注释。
　　对 IE7 来说，最好的方法时设置元素的最小高度为 0 (min-height:0;)。
　　haslayout 问题引起的常见 bug
　　E6 的躲躲猫(peek-a-boo) bug
　　bug 修复: _height:1%;

 

补充资料：

hasLayout的触发条件：
  • position: absolute(IE5+)
  • float: left|right(IE5+)
  • display: inline-block(IE5+)
  • width: "auto"以外的任何值(IE5+; 对inline元素无效)
  • height: "auto"以外的任何值(IE5+; 对inline元素无效)
  • zoom: "normal"以外的任何值(IE5.5+; IE私有属性)
  • writing-mode: tb-rl(IE5+; IE私有属性)
  • overflow: hidden|scroll|auto(IE7; 此属性在IE6及更早版本中不能应用在未触发hasLayout的元素上)
  • overflow-x|-y: hidden|scroll|auto(IE7; 此属性在IE6及更早版本中不触发hasLayout; 此属性在CSS3中才获支持)
  • position: fixed(IE7)
  • min-width: 任何值(IE7; 即使是0)
  • max-width: "none"以外的任何值(IE7)
  • min-height: 任何值(IE7)
  • max-height: "none"以外的任何值 (IE7)
  • position: fixed(IE7)
清除或重置hasLayout：
  • position: static(IE5+)
  • float: none(IE5+)
  • display: "inline-block"以外的任何值(IE5+)
  • width|height: "auto"(IE5+; 对inline元素无效)
  • zoom: "normal"(IE5.5+; IE私有属性)
  • writing-mode: 从'tb-rl'到'lr-tb'(IE5+; IE私有属性)
  • max-width|max-height: "none"(IE7)
  • overflow: visible(IE7)

 

 

posted @ 2015-09-16 10:19  羊洋仰  阅读(1292)  评论(0)  编辑  收藏  举报