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

问题来源

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

IE7下效果

 

 

其余浏览器下效果

之因此这样是由于ie六、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)