CSS基础--CSS中IE浏览器的hasLayout，低版本IE的bug来源

什么是hasLayout？hasLayout是IE特有的属性。ie下的很多cssbug都和它息息相关。在IE中，元素要么计算其自身内容的大小和组织，要么依赖于父元素来计算内容的大小和组织。当元素的hasLayout属性为true时，它??负责调整和定位自身以及可能的后代元素。虽然这意味着这个元素需要花更多的钱来维护自己和里面的内容，而不是依赖祖先元素来完成这些任务。哪些元素默认具有hasLayout属性在IE浏览器中，以下元素默认具有hasLayout=true

<button><iframe><embed><object><applet><marquee>很多情况下，我们可以通过将hasLayout的状态改为true来解决大部分ie下显示的bug。这里显示的bug一般是指IE7及以下的浏览器。如何设置haslayout？下面列出一些可以触发hasLayout的CSS属性值。position:absolute(取消use:static)float:leftorright(取消use:none)display:inline-block(取消use:othervalues)width:auto以外的值(取消use:auto)height:非auto(canceluse:auto)zoom:的值有一个值(canceluse:normaloremptyvalue)ie7有一些额外的属性可以触发这个属性（不完整列表）：min-height:（网上查了一下是anyvalue,但是实践中发现exceptnone和auto)max-height:(anyvalueexceptnoneandauto)min-width:(网上查了一下，是anyvalue，但是实践发现还是exceptnoneandauto)max-width:(anyvalueexceptnoneandauto)overflow:(anyvalueexceptvisible)overflow-x:(anyvalueexceptvisible)overflow-y:(anyvalueexceptvisible)position:fixedjs测试元素是否haslayout<divid="menu"onclick="javascript:alert(menu.currentStyle.hasLayout)">这是文本内容</div>在IE浏览器中点击ID为menu的DOM元素，如果元素有布局，则弹出结果为真，否则为假。示例1.当元素包含浮动或绝对定位的内容时，它通常会表现出奇怪和错误的行为，请参见以下代码：html:<divid="nofloatbox"><divid="floatbox"></div></div>css:#nofloatbox{border:1pxsolid#FF0000;背景：#CCC；缩放：1；}#floatbox{浮动：左；宽度：100px；高度：100px；边框：1px实心#0000FF；background:#00FF00;}IE浏览器得到的结果如图：可以看出没有浮动的div并没有被里面浮动元素的高度拉伸，不会自动计算它的高度。接下来，让我们添加zoom:1;到这个非浮动的div来触发它的hasLayout属性。css代码如下：#nofloatbox{border:1pxsolid#FF0000;背景：#CCC；zoom:1;}在IE7和低版本浏览器得到的结果如图：那么其他标准的浏览器相当于清除了子元素的浮动，给父元素加上了overflow:hidden。2.hasLayout也可以对行内元素产生影响。当内联元素的hasLayout为true时，可以设置内联元素的高和宽，得到想要的效果，（这里指的是IE7及以下版本的浏览器）如下例：<p>今天的<spanstyle="width:100px;height:50px;background:#DDD;">天气</span>真好</p>浏览器效果如下图：Addzoom:1;给span触发hasLayout:<p>今天的<spanstyle="width:100px;height:50px;background:#DDD;zoom:1">天气</span>真不错</p>中的效果IE7浏览器如图：注意：需要注意的是，hasLayout是微软专有的东西，对firefox、chrome等兼容标准的浏览器无效，所以不要过度依赖。事实上，基于合理的语义、适当的文档流和正确的标准化生产出来的页面，在各个公司生产的标准渲染浏览器下，一般不会有太多的兼容性问题。</p> </div> </div> <div class="zuowen_sxy"> <div class="prev">上一篇：<a title="Doodooke发布3.0.0-alpha.6，Koa+Vue+Taro最佳实践" href="/webqianduan/205993.html">Doodooke发布3.0.0-alpha.6，Koa+Vue+Taro最佳实践</a> </div> <div class="prev">下一篇：<a title="网页开发技术" href="/webqianduan/205995.html">网页开发技术</a> </div> </div> <div class="related_about"> <div class="related_about_t"><code>CSS基础--CSS中IE浏览器的hasLayout，低版本IE的bug来源相关文章</code></div> <ul> <li><a href="/kejifunen/343917.html" target="_blank" title="百度 CTO 王海峰：百度地图已成为 AI 时代刻画真实世界">百度 CTO 王海峰：百度地图已成为 AI 时代刻画真实世界</a></li> <li><a href="/kejifunen/343835.html" target="_blank" title="腾讯钟翔平：“出行新价值”是生态、场景、基础能力的不断突破">腾讯钟翔平：“出行新价值”是生态、场景、基础能力的不断突破</a></li> <li><a href="/kejifunen/343733.html" target="_blank" title="人脸识别也“脸盲”，360AI安全研究院揭示AI关键基础设施">人脸识别也“脸盲”，360AI安全研究院揭示AI关键基础设施</a></li> <li><a href="/kejifunen/343641.html" target="_blank" title="拥有3亿用户、1500万企业机构，钉钉5.1开启全新数字基础">拥有3亿用户、1500万企业机构，钉钉5.1开启全新数字基础</a></li> <li><a href="/kejifunen/343569.html" target="_blank" title="深股通新一代金融云正式上线，腾讯云助力构建证券行业新基础设施">深股通新一代金融云正式上线，腾讯云助力构建证券行业新基础设施</a></li> <li><a href="/kejifunen/343521.html" target="_blank" title="“加强网络安全基础设施建设”被列入“十四五”规划">“加强网络安全基础设施建设”被列入“十四五”规划</a></li> <li><a href="/kejifunen/343421.html" target="_blank" title="马化腾：“云”是基础设施，是“互联网+”的第一要素 ">马化腾：“云”是基础设施，是“互联网+”的第一要素 </a></li> <li><a href="/kejifunen/343418.html" target="_blank" title="新基建安全“发起人”周鸿祎：新基建需要安全基础设施同步建设">新基建安全“发起人”周鸿祎：新基建需要安全基础设施同步建设</a></li> <li><a href="/kejifunen/343281.html" target="_blank" title="互联网女王：支付宝等奠定中国移动互联网商业化基础">互联网女王：支付宝等奠定中国移动互联网商业化基础</a></li> <li><a href="/kejifunen/343267.html" target="_blank" title="百度吴甜：从基础设施到应用、生态、人才培养，人工智能新基础设">百度吴甜：从基础设施到应用、生态、人才培养，人工智能新基础设</a></li> <li><a href="/kejifunen/343037.html" target="_blank" title="人人参与公益：阿里巴巴“平台优势”升级公益基础设施">人人参与公益：阿里巴巴“平台优势”升级公益基础设施</a></li> <li><a href="/kejifunen/342929.html" target="_blank" title="北森一体化战略升级，iTalentX为人力资源新基础设施添上">北森一体化战略升级，iTalentX为人力资源新基础设施添上</a></li> <li><a href="/kejifunen/342908.html" target="_blank" title="知识产品没有速成班，也是百度搜索护城河的基础">知识产品没有速成班，也是百度搜索护城河的基础</a></li> <li><a href="/kejifunen/342668.html" target="_blank" title="快手教育生态亮相未来教育大会，补贴66.6亿流量完善教育产业">快手教育生态亮相未来教育大会，补贴66.6亿流量完善教育产业</a></li> <li><a href="/kejifunen/342500.html" target="_blank" title="滴滴柴华：基础地图数据准确率超过95%，将持续优化提升出行体">滴滴柴华：基础地图数据准确率超过95%，将持续优化提升出行体</a></li> <li><a href="/kejifunen/342479.html" target="_blank" title="智能化管理已成为我国物流行业提高效率、降低成本的基础，贝恩公">智能化管理已成为我国物流行业提高效率、降低成本的基础，贝恩公</a></li> <li><a href="/kejifunen/342476.html" target="_blank" title="国内券商首次推出全栈私有云，腾讯云助力中银证券打造数字化新基">国内券商首次推出全栈私有云，腾讯云助力中银证券打造数字化新基</a></li> <li><a href="/kejifunen/342391.html" target="_blank" title="专访微众银行、区块链、负责人、范瑞彬：区块链是“分布式商业”">专访微众银行、区块链、负责人、范瑞彬：区块链是“分布式商业”</a></li> <li><a href="/kejifunen/342347.html" target="_blank" title="泰赞科技完成数千万美元C1轮融资，为企业打造创意内容新基础设">泰赞科技完成数千万美元C1轮融资，为企业打造创意内容新基础设</a></li> <li><a href="/kejifunen/342255.html" target="_blank" title="小米发布了“零基础半天学会”的智能魔方！还能控制智能家电">小米发布了“零基础半天学会”的智能魔方！还能控制智能家电</a></li> </ul> </div> </div> <div class="main-right"> <div class="right_fix"> <div class="r_con"> <div class="r_title">最新推荐</div> <ul> <li><em>1</em><a href="/kejifunen/370287.html" title="智能家居！物联网技术赋能传统基础设施，让世界变得更美好" target="_blank">智能家居！物联网技术赋能传统基础设施，让世界变得更美好</a></li> <li><em>2</em><a href="/kejifunen/370271.html" title="ARKit不仅仅是为AR眼镜奠定基础" target="_blank">ARKit不仅仅是为AR眼镜奠定基础</a></li> <li><em>3</em><a href="/kejifunen/368626.html" title="YONO耳塞式基础体温计，让备孕不再困难" target="_blank">YONO耳塞式基础体温计，让备孕不再困难</a></li> <li><em>4</em><a href="/kejifunen/366860.html" title="AI机器人有望取代人类检查水下基础设施" target="_blank">AI机器人有望取代人类检查水下基础设施</a></li> <li><em>5</em><a href="/kejifunen/366597.html" title="想要使用人工智能和机器学习吗？需要合适的基础设施" target="_blank">想要使用人工智能和机器学习吗？需要合适的基础设施</a></li> <li><em>6</em><a href="/kejifunen/364935.html" title="浅析AR-VR在基础教育中的应用现状及前景" target="_blank">浅析AR-VR在基础教育中的应用现状及前景</a></li> <li><em>7</em><a href="/kejifunen/364031.html" title="吴宓乔伟库克CSS2018腾讯安全探索论坛上演USB漏洞无硬" target="_blank">吴宓乔伟库克CSS2018腾讯安全探索论坛上演USB漏洞无硬</a></li> <li><em>8</em><a href="/kejifunen/363673.html" title="Oculus收购眼球追踪技术公司为社交VR奠定基础？ " target="_blank">Oculus收购眼球追踪技术公司为社交VR奠定基础？ </a></li> <li><em>9</em><a href="/kejifunen/363640.html" title="从终极单品到基础设施，阿里巴巴新商业时代的人工智能战略" target="_blank">从终极单品到基础设施，阿里巴巴新商业时代的人工智能战略</a></li> <li><em>10</em><a href="/kejifunen/363315.html" title="小米众筹推出女性基础体温计售价129元" target="_blank">小米众筹推出女性基础体温计售价129元</a></li> </ul> </div> <div class="r_con"> <div class="r_title">猜你喜欢</div> <ul class="you_like"> <li><em>1</em><a href="/kejifunen/362613.html" title="为腾飞奠定基础 可穿戴设备等待黎明" target="_blank">为腾飞奠定基础 可穿戴设备等待黎明</a></li> <li><em>2</em><a href="/kejifunen/359941.html" title="就以安全为基础，小天才手机手表Z2是怎样炼成的" target="_blank">就以安全为基础，小天才手机手表Z2是怎样炼成的</a></li> <li><em>3</em><a href="/kejifunen/359425.html" title="如果你是零基础的音乐演奏者，这些产品更适合你" target="_blank">如果你是零基础的音乐演奏者，这些产品更适合你</a></li> <li><em>4</em><a href="/kejifunen/359223.html" title="VR手柄有很多种，但我们还是应该回到基础" target="_blank">VR手柄有很多种，但我们还是应该回到基础</a></li> <li><em>5</em><a href="/kejifunen/357738.html" title="可穿戴设备对企业基础设施构成威胁吗？ " target="_blank">可穿戴设备对企业基础设施构成威胁吗？ </a></li> <li><em>6</em><a href="/kejifunen/357108.html" title="华帝洗碗机！以用户需求为基础，以独特的创新产品打造新体验" target="_blank">华帝洗碗机！以用户需求为基础，以独特的创新产品打造新体验</a></li> <li><em>7</em><a href="/kejifunen/354991.html" title="助力中国圣谷培养顶尖人才的K12人工智能基础已被百度教育大脑" target="_blank">助力中国圣谷培养顶尖人才的K12人工智能基础已被百度教育大脑</a></li> <li><em>8</em><a href="/kejifunen/352117.html" title="云从科技在京首发国家人工智能基础资源公共服务平台" target="_blank">云从科技在京首发国家人工智能基础资源公共服务平台</a></li> <li><em>9</em><a href="/kejifunen/351956.html" title="英特尔基础巅峰！它可能是市场上最智能的手表" target="_blank">英特尔基础巅峰！它可能是市场上最智能的手表</a></li> <li><em>10</em><a href="/kejifunen/350991.html" title="“傻瓜”智能轮滑鞋！零基础用户也能轻松驾驭" target="_blank">“傻瓜”智能轮滑鞋！零基础用户也能轻松驾驭</a></li> <li><em>11</em><a href="/kejifunen/349146.html" title="VR+教育已进入深水区，基础教育蓝海市场蓄势待发， " target="_blank">VR+教育已进入深水区，基础教育蓝海市场蓄势待发， </a></li> <li><em>12</em><a href="/kejifunen/348965.html" title="微博控股公司优信布局AR的基础是微软的Hololens平台，" target="_blank">微博控股公司优信布局AR的基础是微软的Hololens平台，</a></li> <li><em>13</em><a href="/kejifunen/348126.html" title="自动驾驶实施物流场景 嬴彻科技助力构建下一代货运基础设施" target="_blank">自动驾驶实施物流场景 嬴彻科技助力构建下一代货运基础设施</a></li> <li><em>14</em><a href="/kejifunen/347460.html" title="银光物联网！物联网卡为建设全球智慧医院奠定基础" target="_blank">银光物联网！物联网卡为建设全球智慧医院奠定基础</a></li> <li><em>15</em><a href="/kejifunen/346967.html" title="亚马逊语音专家揭秘 Alexa 耳语模式的 AI 基础" target="_blank">亚马逊语音专家揭秘 Alexa 耳语模式的 AI 基础</a></li> <li><em>16</em><a href="/kejifunen/345849.html" title="炫酷半透明动态歌词显示音箱LyricsSpeaker" target="_blank">炫酷半透明动态歌词显示音箱LyricsSpeaker</a></li> <li><em>17</em><a href="/kejifunen/345687.html" title="拉卡拉支付在智能POS的基础上，新增场景化收单业务" target="_blank">拉卡拉支付在智能POS的基础上，新增场景化收单业务</a></li> <li><em>18</em><a href="/kejifunen/345153.html" title="腾讯马斌！安全能力是腾讯担当“数字助手”的重要基础" target="_blank">腾讯马斌！安全能力是腾讯担当“数字助手”的重要基础</a></li> <li><em>19</em><a href="/kejifunen/344177.html" title="Waterdrop完成2.3亿美元D轮融资，用于开发新型保险" target="_blank">Waterdrop完成2.3亿美元D轮融资，用于开发新型保险</a></li> <li><em>20</em><a href="/kejifunen/344064.html" title="小桔汽车服务杨峻：司机是汽车租赁生态系统的基础，感谢3000" target="_blank">小桔汽车服务杨峻：司机是汽车租赁生态系统的基础，感谢3000</a></li> </ul> </div> </div> </div> </div> <div class="related_article"></div> <div class="footer"> <p>Copyright © 2012-2022 程序源 版权所有<a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">豫ICP备2022028201号</a></p> <p>重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。 如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。</p> </div> <!-- 应用插件标签 start --> <!-- 应用插件标签 end --> </body> </html>