吉隆坡机场免税店自提:认识hasLayout —— IE浏览器CSS BUG的一大祸首！

什么是hasLayout？
hasLayout是IE特有的一个属性。很多的ie下的cssbug都与其息息相关。在ie中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。当一个元素的hasLayout属性值为true时，它负责对自己和可能的子孙元素进行尺寸计算和定位。虽然这意味着这个元素需要花更多的代价来维护自身和里面的内容，而不是依赖于祖先元素来完成这些工作。

下列元素默认 hasLayout=true ：

<button><iframe> <embed> <object> <applet><marquee> </p><p>很多情况下，我们把 hasLayout的状态改成true 就可以解决很大部分ie下显示的bug。 <br>hasLayout属性不能直接设定，你只能通过设定一些特定的css属性来触发并改变 hasLayout 状态。下面列出可以触发hasLayout的一些CSS属性值。 <br>------------------------------------- <br>display <br>启动haslayout的值:inline-block <br>取消hasLayout的值:其他值 <br>-------------------------------------- <br>width/height <br>启动hasLayout的值：除了auto以外的值 <br>取消hasLayout的值：auto <br>--------------------------------------- <br>position <br>启动hasLayout的值：absolute <br>取消hasLayout的值：static <br>---------------------------------------- <br>float <br>启动hasLayout的值：left或right <br>取消hasLayout的值：none <br>--------------------------------------- <br>zoom <br>启动hasLayout的值：有值 <br>取消hasLayout的值：narmal或者空值 <br>（zoom是微软IE专有属性，可以触发hasLayout但不会影响页面的显示效果。zoom: 1常用来除错，不过 ie 5 对这个属性不支持。） <br>---------------------------------------- <br>writing-mode: tb-rl <br>这也是微软专有的属性。<br><br>ie7还有一些额外的属性可以触发该属性（不完全列表）：</p><p>min-height: (任何值)max-height: (任何值除了none)min-width: (任何值)max-width:(任何值除了none)overflow: (任何值除了visible)overflow-x: (任何值除了visible)overflow-y:(任何值除了visible)5position: fixed </p><p>因元素hasLayout而导致的问题其实一般都很容易发现：往往是内容出现错位甚至完全不可见。举一个典型例子，当一个元素内含浮动或绝对定位的内容时，它通常会表现出奇怪和错误的行为，看下面的代码：</p><p><div id="nofloatbox"><br><div id="floatbox"></div><br></div> </p><p>CSS代码如下：</p><p>#nofloatbox {border: 1px solid #FF0000;background: #CCC;} #floatbox{float: left;width: 100px;height: 100px;border: 1px solid #0000FF;background: #00FF00;} </p><p>ie显示结果如下图： <br><br></p><p>可见无浮动的div并没有被里面的浮动元素的高度撑开，其高度并不会自动计算。我们下面再给这个无浮动的div加上个zoom:1;来触发其hasLayout属性试试，css代码如下：</p><p>#nofloatbox { border: 1px solid #FF0000;background: #CCC;zoom:1;}#floatbox {float: left; width: 100px;height: 100px;border: 1px solid#0000FF;background: #00FF00;} </p><p>保存刷新ie浏览器窗口，如下图：</p><p><br>可见这次外围容器的高度被撑起来了。 同样，设定上文所述的其他会触发hasLayout的css属性都会得到这个结果。通常firefox等标准的遵守浏览器可以加上overflow: hidden;来解决，而IE则不行，需要触发其hasLayout属性才可以。<br> <br>hasLayout对于内联元素也可以有效果，当内联元素的hasLayout为true的时候，可以给这个内联元素设定高度和宽度并得到期望的效果。如下例： <br>代码：</p><p><p>今天的<span style="width: 100px; height: 50px; background: #DDD;">天气</span>真好</p> </p><p>效果如下图所示：</p><p><br></p><p>下面给span加上zoom: 1;来触发hasLayout：</p><p><p>今天的<span style="width: 100px; height: 50px; background: #DDD; zoom: 1;">天气</span>真好</p> </p><p>这回的效果如下图所示：</p><p><br></p><p>要注意的是，hasLayout是微软专有的东西，对firefox等比较遵守标准的浏览器就无效了，因此不可太过依赖。貌似现在的IE8就已经不用特意去触发hasLayout就可以得到和firefox一致的效果，不知ie8是否已经弃用这个属性了？</p><p>其实依据合理的语义化，恰当的文档流，正确的标准化所生产出来的页面，在各个公司出品的标准渲染的浏览器下，一般并不会存在太多兼容性的问题的。</p><p>一般如果是因为layout而引起的显示不符期望效果的话，在ff下会表现正常，而在ie下会出现错误。这个时候可以尝试触发父容器及其中的子容器的 haslayout属性，通常可以通过加上zoom:1;来调试。直到找到了产生问题的元素，再进行针对性的修正。最好的办法是对这个元素设置尺寸属性。但是，有时不便指定尺寸属性的情况下，就只能寻找替代方案了。对于ie7，最好的办法是设置最小高度属性为0；这个技术是无害的，因为0本来就是这个属性的初始值。而且没有必要对其他浏览器隐藏这个属性。而对于ie6和更早版本中触发一个元素hasLayout的方法是在overflow属性是visible的情况下设置这个元素的高度属性为1%，然后对其他浏览器隐藏这个设置。这种技术就是著名的Holly hack。</p><br></div> <div class="list-group"> <a href="/article/woxdsw" class="list-group-item">？？？？？请求好心人帮忙——关于IE浏览器的问题</a> <a href="/article/vzcqqv" class="list-group-item">IE浏览器</a> <a href="/article/vzqpdl" class="list-group-item">IE浏览器</a> <a href="/article/vzrdid" class="list-group-item">IE浏览器</a> <a href="/article/vzrrgv" class="list-group-item">IE浏览器</a> <a href="/article/waaxrh" class="list-group-item">IE浏览器</a> <a href="/article/wanqwh" class="list-group-item">ie浏览器</a> <a href="/article/waptgt" class="list-group-item">IE浏览器</a> <a href="/article/waxjep" class="list-group-item">IE浏览器</a> <a href="/article/wbjtrq" class="list-group-item">ie浏览器</a> <a href="/article/wboiau" class="list-group-item">IE浏览器</a> <a href="/article/wbryhs" class="list-group-item">IE浏览器</a> <a href="/article/wcbnrf" class="list-group-item">IE浏览器</a> <a href="/article/wcekfu" class="list-group-item">IE浏览器</a> <a href="/article/wceydo" class="list-group-item">IE浏览器</a> <a href="/article/wcfidg" class="list-group-item">IE浏览器</a> <a href="/article/wcgmcn" class="list-group-item">IE浏览器</a> <a href="/article/wckoep" class="list-group-item">IE浏览器</a> <a href="/article/wcmxyy" class="list-group-item">IE浏览器</a> <a href="/article/wcsxrm" class="list-group-item">IE浏览器</a> <a href="/article/wdctnf" class="list-group-item">ie浏览器</a> <a href="/article/wdfpwb" class="list-group-item">IE浏览器</a> <a href="/article/wdgesv" class="list-group-item">IE浏览器</a> <a href="/article/wdgyvt" class="list-group-item">IE浏览器</a> </div> </div> </div> </div> </div> </div> <footer id="footer" class="footer hidden-print"> <div class="container"> <div class="panel panel-default"> <div class="panel-heading">相关问题</div> <div class="panel-body"> <a class="btn btn-default" href="/article/vxusac" title="康生独特的色情嗜好">康生独特的色情嗜好</a> <a class="btn btn-default" href="/article/vxusad" title="2010.2.27智利发生8.8级地震现场实时图片">2010.2.27智利发生8.8级地震现场实时图片</a> <a class="btn btn-default" href="/article/vxusae" title="什么是SAP系统">什么是SAP系统</a> <a class="btn btn-default" href="/article/vxusaf" title="红景天的功效和单味食用方法_中国藏药网">红景天的功效和单味食用方法_中国藏药网</a> <a class="btn btn-default" href="/article/vxusag" title="写得真好呀！">写得真好呀！</a> <a class="btn btn-default" href="/article/vxusah" title="中国少数民族简介（二）">中国少数民族简介（二）</a> <a class="btn btn-default" href="/article/vxusai" title="美报认为：“下一代”是中国的真正优势]">美报认为：“下一代”是中国的真正优势]</a> <a class="btn btn-default" href="/article/vxusaj" title="禅的智慧——善恶、慈悲">禅的智慧——善恶、慈悲</a> <a class="btn btn-default" href="/article/vxusak" title="清心养性的佛音">清心养性的佛音</a> <a class="btn btn-default" href="/article/vxusal" title="领导四书 （上、下册）">领导四书 （上、下册）</a> <a class="btn btn-default" href="/article/vxusam" title="保持心脏血管通畅的自然疗法">保持心脏血管通畅的自然疗法</a> <a class="btn btn-default" href="/article/vxusan" title="禅的智慧——修悟、自我">禅的智慧——修悟、自我</a> <a class="btn btn-default" href="/article/vxusao" title="李新月：星光大道怎成了娱乐明星的裸体通道？—李新月3186的博客—强国博客—人民网">李新月：星光大道怎成了娱乐明星的裸体通道？—李新月3186的博客—强国博客—人民网</a> <a class="btn btn-default" href="/article/vxusap" title="尚雯婕牵猛虎拍新歌MV 扮怪博士向麦昆致敬">尚雯婕牵猛虎拍新歌MV 扮怪博士向麦昆致敬</a> <a class="btn btn-default" href="/article/vxusaq" title="一堂好课的标准是什么6">一堂好课的标准是什么6</a> <a class="btn btn-default" href="/article/vxusar" title="【3D-插画-工笔画】唯美的工笔猫 38p【极品收藏】">【3D-插画-工笔画】唯美的工笔猫 38p【极品收藏】</a> <a class="btn btn-default" href="/article/vxusas" title="脏衣服难洗吗？">脏衣服难洗吗？</a> <a class="btn btn-default" href="/article/vxusat" title="禅的智慧——自然、清静">禅的智慧——自然、清静</a> <a class="btn btn-default" href="/article/vxusau" title="做蓝颜、红颜知己">做蓝颜、红颜知己</a> <a class="btn btn-default" href="/article/vxusav" title="使癌細胞多休眠">使癌細胞多休眠</a> <a class="btn btn-default" href="/article/vxusaw" title="中国少数民族简介（一）">中国少数民族简介（一）</a> <a class="btn btn-default" href="/article/vxusax" title="卫生厅暗访12家医院发现287个烟头罚款287万元">卫生厅暗访12家医院发现287个烟头罚款287万元</a> <a class="btn btn-default" href="/article/vxusay" title="预测1">预测1</a> <a class="btn btn-default" href="/article/vxusaz" title="我们还能做朋友吗">我们还能做朋友吗</a> <a class="btn btn-default" href="/article/vxusba" title="常用偏方">常用偏方</a> <a class="btn btn-default" href="/article/vxusbb" title="会动的山水画！">会动的山水画！</a> <a class="btn btn-default" href="/article/vxusbc" title="90后女孩与已婚男人的赔本交易">90后女孩与已婚男人的赔本交易</a> <a class="btn btn-default" href="/article/vxusbd" title="ps多款实用教程">ps多款实用教程</a> <a class="btn btn-default" href="/article/vxusbe" title="B3【汉字七画是男，三画是女的含义（精图注解）】★">B3【汉字七画是男，三画是女的含义（精图注解）】★</a> <a class="btn btn-default" href="/article/vxusbf" title="破除汽车维修的潜规则">破除汽车维修的潜规则</a> <a class="btn btn-default" href="/article/vxusbg" title="禅的智慧——听说、时间">禅的智慧——听说、时间</a> </div> </div></div> <div class="copy-right"> <p>中财网，客观、专业、权威的知识性互动百科全书。</p></div> </footer> <div class="copy-right"> <div class="container"> <div class="col-md-12"> <a href="https://www.q-5.net/" target="_blank">最新新闻</a> <a href="https://www.wacths.com/" target="_blank">沃茨手表网</a> <a href="https://www.csdndoc.com/" target="_blank">CSDN程序文档</a> <a href="https://www.cmjoy.com/" target="_blank">上海旅游网</a> <a href="https://www.smbaike.com/" target="_blank">神马百科</a> <a href="https://www.familylifemag.com/" target="_blank">程序博客</a> <a href="https://www.xjpta.cn/" target="_blank">香蕉皮作业帮</a> <a href="https://www.cidugushi.com/" target="_blank">景德镇新闻网</a> <a href="https://www.uyuyao.com/" target="_blank">余姚信息网</a> <a href="https://www.zuoyewang.cc/" target="_blank">作业帮作业网</a> <a href="https://www.wenda8.com/" target="_blank">互助问答吧</a> <a href="https://www.16lo.com/" target="_blank">16楼社区</a> <a href="https://www.zyebang.com/">解题作业帮</a><a href="https://www.6210k.com/">艺术百科</a><a href="http://www.ld5.top/">亮点网</a><a href="http://www.smbaike.com/">神马百科</a> <a href="https://www.smwenxue.com/">神马文学网</a> <a href="https://www.zuoye5.com/">拍题作业网</a> <a href="https://www.uczhidao.com/">UC知道</a> <a href="https://www.52sanwen.top/">我爱散文网</a> <a href="https://www.bfwang.top/">北方网</a> <a href="https://www.kexue5.top/">科学网</a> <a href="https://www.wenku1.top/">第一文库网</a> <a href="https://www.wszyw.top/">微思作业网</a> <a href="https://www.wz51.top/">我要文章网</a> <a href="https://www.dsp33.cn/">都市新闻网</a><a href="https://www.xofi.com.cn/">西欧教育</a><a href="https://www.xs2xf.cn/">西山新闻网</a><a href="https://www.holoes.com.cn/">好楼房产信息网</a> <a href="https://www.9x1x.cn/">九乡新闻网</a><a href="https://www.vnql.com.cn/">农企信息网</a><a href="https://www.xnvm.com.cn/">仙女们写真照片</a><a href="https://www.lumta.com.cn/">音乐简谱网</a><a href="https://www.miliya.com.cn/">米粒芽</a><a href="https://www.xuexiaodaquan.net/">学校大全网</a><a href="https://www.wz95.cn/">95后网站</a><a href="https://www.ranatlanta.cn/">汝南网</a><a href="https://www.opuo.com.cn/">欧普网</a><a href="https://www.7c4.com.cn/">宝宝故事网</a> <a href="https://www.pp6a.cn/">神马品牌网</a> <a href="https://www.hzxzt.com.cn/">杭州交通信息网/"></a> <a href="https://www.hzsgz.com.cn/">杭州市高中教育平台</a> <a href="https://www.crrcn.cn/">查人人中国名人网</a> <a href="https://www.amzr.com.cn/">爱美之人</a> <a href="https://www.scmpx.com.cn/">上车买票</a> <a href="https://www.azxt.com.cn/">安卓系统之家</a> <a href="https://www.520sdw.cn/">中科新闻网</a> <a href="https://www.218zy.cn/">科学院研究所</a> <a href="https://www.ekowh.cn/">高考快车</a> <a href="https://www.520gsw.cn/">高考志愿帮</a> <a href="https://www.madbar.cn/">大学志愿大全</a> <a href="https://www.oisogo.cn/">高校问答</a> <a href="https://www.togowu.cn/">高考问答</a> <a href="https://www.mdeusa.cn/">中考百科</a> <a href="https://www.520bzw.cn/">大学知道</a> <a href="https://www.9uwang.cn/">久游网</a> </div></div></div> </body> </html>