zoukankan      html  css  js  c++  java
  • 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外任意值

          . . . . . .还有很多

      

  • 相关阅读:
    LASSO回归原理和Python代码 | 线性回归 | 交叉验证
    初探投行 | 金融
    癌症疫苗 | Cancer Vaccines
    文献复现 | Machine Learning on Human Muscle Transcriptomic Data for Biomarker Discovery and TissueSpecific Drug Target Identification
    癌症研究必备基础知识 | 生信
    初探RNA | RNA分类 | miRNA | lncRNA
    PubMed文献数据挖掘
    罕见病 | 国内 | 国外 | 市场状态
    医保目录谈判 | 国家带量采购 | DRG/DIP支付方式改革 | 腾笼换鸟
    TCGA数据挖掘基本教程
  • 原文地址:https://www.cnblogs.com/pada/p/3689356.html
Copyright © 2011-2022 走看看