你的位置:首页 > 网页设计

[网页设计]IE7 浏览器下面设置text


问题来源

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