• haslayout


      我写的网页并不多,因为鲁莽的直接写网页,没有一边测试,所以最后在IE6,7上吃了不少苦~但是在解决问题的过程中反倒教会了我很多东西,虽然那个网站深受鄙视,我也对其不完美而淡淡的忧伤~

      说说其中一处bug吧,为了好的用户体验,在产品页面我设置了一个侧边栏,配上背景图,一切貌似妥妥的,但IE6可不是好伺候的,此时它出现的问题是:1.它不支持fixed;2.它不对a之外的元素支持:hover等链接相关的伪类;3.拥有布局后,滚动时列表项背景图间歇性显示消失~

      前两个问题倒是好解决,第三个问题在当时着实让我出了一身冷汗,这里就要了解一下什么是IE的布局(layout)了,window上的IE使用布局来控制特定元素的尺寸和定位以减少显示引擎的处理开销,拥有布局的元素被限制为矩形,我们常常在不知不觉中触发了layout,而出现奇怪的表现,比如(在IE6及更低版本中)1.滚动时列表项背景图间歇性显示消失;2.文本不围绕相邻的浮动元素3.元素忽视设定的宽度而错误扩展以适应内容尺寸(so IE6下的width更类似于min-width);4.元素不会收缩;等等

      其实触发布局相当于创建了IE下的BFC(据某书上介绍:IE8及以后版本使用新引擎,据称不使用haslayout属性),它能帮我们解决很多问题,例如闭合浮动,解决margin-collapsing。所以了解haslayout,根据实际去使用它,一般遇到IE下的bug,应先试着触发haslayout,判断问题根源~

      常见的默认拥有布局的有:html(标准模式下),body,table,img,hr,表单,iframe......

      触发条件:(任一即可)

          display:inline-block

          设置height/weight属性,且不为auto

          设置float不为none

          position:absolute

          writing-mode:tb-rl

          设置zoom除normal外的任意值(我最喜欢这个方法,安全无公害,可以触发BFC或用于判断bug是否出自以layout,以进行进一步的维修代码,而且不会对其环境有其他影响,IE5不支持)

      IE7下还有:

          position:fixed;

          设置overflow/overflow-x/overflow-y且不为visible

          min-任意值

          max-width:除none外任意值

          . . . . . .还有很多

      

  • 相关阅读:
    DataTable.Compute功能
    ip的划分,超详细
    静态页 htm传参数
    [你必须知道的.NET] 第四回:后来居上:class和struct
    [你必须知道的.NET] 第八回:品味类型值类型与引用类型(上)-内存有理
    [你必须知道的.NET] 第五回:深入浅出关键字把new说透
    作废
    XML Schema <第三篇>
    XML基础<第一篇>
    NHibernate之配置文件属性说明
  • 原文地址:https://www.cnblogs.com/pada/p/3689356.html
Copyright © 2020-2023  润新知