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

作者：mobiledu2502927147 | 来源：互联网 | 2023-08-17 19:52

什么是hasLayout？hasLayout是IE特有的一个属性。很多的ie下的cssbug都与其息息相关。在ie中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元

什么是hasLayout？

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

哪些元素默认有hasLayout属性

在IE浏览器中下列默认hasLayout=true的元素

<button>  <embed>   <marquee></code></p><p>很多情况下，我们把 hasLayout的状态改成true 就可以解决很大部分ie下显示的<code>bug</code>。<br />这儿所示的bug一般指的是IE7以及以下的浏览器。</p><h2>如何设置haslayout？</h2><p>下面列出可以触发hasLayout的一些CSS属性值。</p><ul><li>position: <code>absolute</code> (取消使用：static)</li><li>float: <code>left or right</code>(取消使用：none)</li><li>display: <code>inline-block</code> (取消使用：其它值)</li><li>width: <code>除了auto以外的值</code>(取消使用：auto)</li><li>height: <code>除了auto以外的值</code>(取消使用：auto)</li><li>zoom: <code>有值</code>(取消使用：normal或者空值)</li></ul><p>ie7还有一些额外的属性可以触发该属性（不完全列表）：</p><ul><li>min-height: (网上查看说是任何值，但实践发现还是<code>除了none与auto</code>)</li><li>max-height: (任何值除了none与auto)</li><li>min-width: (网上查看说是任何值，但实践发现还是<code>除了none与auto</code>)</li><li>max-width: (任何值除了none与auto)</li><li>overflow: (任何值除了visible)</li><li>overflow-x: (任何值除了visible)</li><li>overflow-y: (任何值除了visible)</li><li>position: fixed</li></ul><h2>js测试一个元素是否有layout</h2><p><code><div id="menu" Onclick="Javascript:alert(menu.currentStyle.hasLayout)">这个是文本内容</div></code></pre><p>在IE浏览器中点击这个ID为menu的DOM元素，如果元素有layout，那么弹出来的结果是<code>true</code>,否则为<code>false</code>。</p><h2>举例</h2><p>1.当一个元素内含浮动或绝对定位的内容时，它通常会表现出奇怪和错误的行为，看下面的代码：<br />html:</p><p><code><div id="nofloatbox"><br>    <div id="floatbox"></div><br></div></code></pre><p>css：</p><p><code>#nofloatbox {<br>    border: 1px solid #FF0000;<br>    background: #CCC;<br>    zoom:1;<br>}<br>#floatbox {<br>    float: left;<br>    width: 100px;<br>    height: 100px;<br>    border: 1px solid #0000FF;<br>    background: #00FF00;<br>}</code></pre><p>IE浏览器得到的结果如图所示：<br /><span><img layer-src="https://img.php1.cn/3cd4a/1eebe/cd5/72fd2c126203a875.webp" src="https://img.php1.cn/3cd4a/1eebe/cd5/72fd2c126203a875.webp" alt="《CSS基础篇--CSS中IE浏览器的hasLayout，IE低版本的bug根源》" /></span></p><p>可见无浮动的div并没有被里面的浮动元素的高度撑开，其高度并不会自动计算。我们下面再给这个无浮动的div加上个zoom:1;来触发其hasLayout属性试试，css代码如下：</p><p><code>#nofloatbox {<br>    border: 1px solid #FF0000;<br>    background: #CCC;<br>    zoom:1;<br>}</code></pre><p>在IE7以及低版本浏览器得到的结果如图：<br /><span><img layer-src="https://img.php1.cn/3cd4a/1eebe/cd5/21e585a7e21fc7dc.png" src="https://img.php1.cn/3cd4a/1eebe/cd5/21e585a7e21fc7dc.png" alt="《CSS基础篇--CSS中IE浏览器的hasLayout，IE低版本的bug根源》" /></span></p><p>那么其它标准浏览器就相当于清除子元素的浮动就可以，在父元素中添加<code>overflow:hidden</code>就可以。</p><p>2.<code>hasLayout</code>对于<code>内联元素</code>也可以有效果，当内联元素的hasLayout为true的时候，可以给这个内联元素设定高度和宽度并得到期望的效果,（<code>这儿是指IE7以及低版本浏览器</code>）如下例：</p><p><code><p>今天的<span >天气</span>真好</p></code></pre><p>浏览器的效果如图所示：<br /><span><img layer-src="https://img.php1.cn/3cd4a/1eebe/cd5/bcafc120671304eb.webp" src="https://img.php1.cn/3cd4a/1eebe/cd5/bcafc120671304eb.webp" alt="《CSS基础篇--CSS中IE浏览器的hasLayout，IE低版本的bug根源》" /></span></p><p>下面给span加上<code>zoom: 1</code>;来触发hasLayout：</p><p><code><p>今天的<span >天气</span>真好</p></code></pre><p>在IE7浏览器中的效果如图所示：<br /><span><img layer-src="https://img.php1.cn/3cd4a/1eebe/cd5/fb32005f2115b419.webp" src="https://img.php1.cn/3cd4a/1eebe/cd5/fb32005f2115b419.webp" alt="《CSS基础篇--CSS中IE浏览器的hasLayout，IE低版本的bug根源》" /></span></p><blockquote><p>注意：要注意的是，hasLayout是微软专有的东西，对<code>firefox</code>,<code>Chrome</code>等比较遵守标准的浏览器就无效了，因此不可太过依赖。其实依据合理的语义化，恰当的文档流，正确的标准化所生产出来的页面，在各个公司出品的标准渲染的浏览器下，一般并不会存在太多兼容性的问题的。</p></blockquote>        <br>
        <script type="text/javascript">
            var cpro_id = "u6885494";

</script>
        <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js"></script>
    </div>

<div class="blog_tags">
        <ul>
                        <li><a href="https://www.php1.cn/tag/css" target="_blank" title="css">css</a></li>
                        <li><a href="https://www.php1.cn/tag/layout" target="_blank" title="layout">layout</a></li>
                        <li><a href="https://www.php1.cn/tag/算法" target="_blank" title="算法">算法</a></li>
                        <li><a href="https://www.php1.cn/tag/input" target="_blank" title="input">input</a></li>
                        <li><a href="https://www.php1.cn/tag/select" target="_blank" title="select">select</a></li>
                        <li><a href="https://www.php1.cn/tag/text" target="_blank" title="text">text</a></li>
                        <li><a href="https://www.php1.cn/tag/button" target="_blank" title="button">button</a></li>
                        <li><a href="https://www.php1.cn/tag/iframe" target="_blank" title="iframe">iframe</a></li>
                        <li><a href="https://www.php1.cn/tag/object" target="_blank" title="object">object</a></li>
                    </ul>
    </div>

<div class="article_cmnt" style="display: none;">
        <div class="cmnt_title">写下你的评论吧 !</div>
        <form action="" method="post">
            <div class="cmnt_text">
                <textarea class="ping-txt" onfocus="ck_txt(this);" onblur="ck_txt2(this);" id="ping-txt" name="ping-txt" >吐个槽吧,看都看了

会员登录 | 用户注册

推荐阅读

web
CSS3选择器的使用方法详解，提高Web开发效率和精准度

本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]

蜡笔小新 2023-12-14 14:37:52
string
关于cuowu类的错误提示和使用AdjustmentListener的问题

本文讨论了一个关于cuowu类的问题，作者在使用cuowu类时遇到了错误提示和使用AdjustmentListener的问题。文章提供了16个解决方案，并给出了两个可能导致错误的原因。 ... [详细]

蜡笔小新 2023-12-13 22:09:56
string
Voicewo在线语音识别转换jQuery插件的特点和示例

本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件，该插件具有快速、架构、风格、扩展和兼容等特点，适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]

蜡笔小新 2023-12-13 20:01:16
string
java 线程死锁模拟

1，关于死锁的理解死锁，我们可以简单的理解为是两个线程同时使用同一资源，两个线程又得不到相应的资源而造成永无相互等待的情况。 2，模拟死锁背景介绍：我们创建一个朋友 ... [详细]

蜡笔小新 2023-12-13 19:12:25
controller
后台获取视图对应的字符串

1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注：不会执行对应的ac ... [详细]

蜡笔小新 2023-12-13 18:03:01
string
猜字母游戏

猜字母游戏猜字母游戏——设计数据结构猜字母游戏——设计程序结构猜字母游戏——实现字母生成方法猜字母游戏——实现字母检测方法猜字母游戏——实现主方法1猜字母游戏——设计数据结构1.1 ... [详细]

蜡笔小新 2023-12-13 12:04:03
select
深入理解CSS中的margin属性及其应用场景

本文主要介绍了CSS中的margin属性及其应用场景，包括垂直外边距合并、padding的使用时机、行内替换元素与费替换元素的区别、margin的基线、盒子的物理大小、显示大小、逻辑大小等知识点。通过深入理解这些概念，读者可以更好地掌握margin的用法和原理。同时，文中提供了一些相关的文档和规范供读者参考。 ... [详细]

蜡笔小新 2023-12-12 18:01:10
web
绕过WAF的XSS检测机制及构建XSS payload的方法

本文介绍了绕过WAF的XSS检测机制的方法，包括确定payload结构、测试和混淆。同时提出了一种构建XSS payload的方法，该payload与安全机制使用的正则表达式不匹配。通过清理用户输入、转义输出、使用文档对象模型（DOM）接收器和源、实施适当的跨域资源共享（CORS）策略和其他安全策略，可以有效阻止XSS漏洞。但是，WAF或自定义过滤器仍然被广泛使用来增加安全性。本文的方法可以绕过这种安全机制，构建与正则表达式不匹配的XSS payload。 ... [详细]

蜡笔小新 2023-12-11 19:42:30
web
《JavaScript高等顺序设计》进修笔记：JavaScript中的事宜流和事宜处置惩罚顺序

JavaScript和HTML之间的交互是经由过程事宜完成的。事宜：文档或浏览器窗口中发作的一些特定的交互霎时。能够运用侦听器（或处置惩罚递次来预订事宜），以便事宜发作时实行相应的 ... [详细]

蜡笔小新 2023-12-11 11:40:52
web
React基础篇一 - JSX语法扩展与使用

本文介绍了React基础篇一中的JSX语法扩展与使用。JSX是一种JavaScript的语法扩展，用于描述React中的用户界面。文章详细介绍了在JSX中使用表达式的方法，并给出了一个示例代码。最后，提到了JSX在编译后会被转化为普通的JavaScript对象。 ... [详细]

蜡笔小新 2023-12-11 11:37:05
string
Android实战——jsoup实现网络爬虫，糗事百科项目的起步

本文介绍了Android实战中使用jsoup实现网络爬虫的方法，以糗事百科项目为例。对于初学者来说，数据源的缺乏是做项目的最大烦恼之一。本文讲述了如何使用网络爬虫获取数据，并以糗事百科作为练手项目。同时，提到了使用jsoup需要结合前端基础知识，以及如果学过JS的话可以更轻松地使用该框架。 ... [详细]

蜡笔小新 2023-12-11 09:19:45
case
使用圣杯布局模式实现网站首页的内容布局

本文介绍了使用圣杯布局模式实现网站首页的内容布局的方法，包括HTML部分代码和实例。同时还提供了公司新闻、最新产品、关于我们、联系我们等页面的布局示例。商品展示区包括了车里子和农家生态土鸡蛋等产品的价格信息。 ... [详细]

蜡笔小新 2023-12-10 20:09:23
case
Java源代码安全审计（二）：使用Fortify-sca工具进行maven项目安全审计

本文介绍了使用Fortify-sca工具对maven项目进行安全审计的过程。作者通过对Fortify的研究和实践，记录了解决问题的学习过程。文章详细介绍了maven项目的处理流程，包括clean、build、Analyze和Report。在安装mvn后，作者遇到了一些错误，并通过Google和Stack Overflow等资源找到了解决方法。作者分享了将一段代码添加到pom.xml中的经验，并成功进行了mvn install。 ... [详细]

蜡笔小新 2023-12-10 13:01:22
case
2015年九月八日js学习总结及相关知识点

本文介绍了2015年九月八日的js学习总结及相关知识点，包括参考书《javaScript Dom编程的艺术》、js简史、Dom、DHTML、解释型程序设计和编译型程序设计等内容。同时还提到了最佳实践是将标签放到HTML文档的最后，并且对语句和注释的使用进行了说明。 ... [详细]

蜡笔小新 2023-12-10 11:10:08
default
JS兼容总结及解决方法

本文总结了在编写JS代码时，不同浏览器间的兼容性差异，并提供了相应的解决方法。其中包括阻止默认事件的代码示例和猎取兄弟节点的函数。这些方法可以帮助开发者在不同浏览器上实现一致的功能。 ... [详细]

蜡笔小新 2023-12-09 17:31:06

mobiledu2502927147

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章