IE7浏览器下面设置text-indent属性变成margin属性BUG_html/css_WEB-ITnose

问题来源

今天做项目的时候发现了一个问题，在使用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的状态，