开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在IE 6中触发haslayout,使用*html div的副作用是什么{height:1%; }

在这个问答内容中，您提到了在IE 6中触发haslayout，使用*html div的副作用是什么{height:1%; }。这里的主要关注点是IE 6浏览器中的haslayout属性和CSS样式。

hasLayout

在IE 6浏览器中，hasLayout是一个特性，它决定了元素如何呈现和布局。一个元素具有hasLayout意味着它将根据某些特定规则进行呈现。一些常见的元素，如<div>和<img>，默认具有hasLayout。

副作用

在这个问答内容中，您提到了一个副作用：使用*html div的副作用是什么{height:1%; }。这里的*html是一个全局选择器，它选择文档的根元素，通常是<html>元素。将这个选择器与div元素结合，意味着这个CSS规则将应用于页面上的所有<div>元素。

CSS样式

在这个问答内容中，您提到了CSS样式{height:1%; }。这个样式设置了元素的高度为1%。这里的百分比高度是相对于父元素的高度计算的。

总结

在这个问答内容中，您提到了在IE 6中触发haslayout，使用*html div的副作用是什么{height:1%; }。这个问答内容主要关注于IE 6浏览器中的hasLayout属性和CSS样式。*html div选择器将应用于页面上的所有<div>元素，并设置它们的高度为1%。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

那些年，我们被耍过的bug——haslayout

在没有其它属性激活layout的情况下，使用下面的css可以重置haslayout属性： width, height (设为 "auto") max-width, max-height (设为 "none...:1%; IE6 的躲躲猫(peek-a-boo) bug bug 修复: _height:1%; 这里列出触发 hasLayout 元素的一些效果 1.阻止外边距折叠两个相连的 div 在垂直上的外边距会发生叠加...这是因为第三个 div 使用 zoom: 1 触发了 hasLayout ，阻止了它与它的子元素的外边距折叠。...而第二个 div 使用 zoom: 1 触发了 hasLayout ，可以包含浮动元素，因此能正确表现出高度，其边框位置也正常了。...上图两个 div 都设置了背景图，但只有使用 zoom: 1 触发了 hasLayout 的第二个 div 才能正确显示背景图。

6801 0

CSS 清理浮动 clear属性

1）使用带clear属性的空元素这也是W3C推荐使用的方法，首先在CSS中定义一个清理的 class，然后在浮动元素的后面，使用一个空元素或。...如： box1 box2 如果你很明确的知道接下来的元素是什么，这个方法很不错，它不需要 hack，不添加额外的元素。但是，使用这种方法，必须确保浮动元素后面确实有元素。...伪元素，因此还需要为 .clearfix 设置width、或 height、或 zoom 等一系列属性，来触发布局（即，使IE私有属性 hasLayout 的值为 true）。...在IE7中，把 overflow属性设置为 visible 之外的值，就可以触发布局，IE6则不行。因此，在IE6中，可以为容器设置 zoom: 1，来触发布局。...因此，为了避免不同浏览器下的表现差异，在实际开发中，需要创建 BFC 的元素，同时也要触发 hasLayout。事实上，在实际开发中，很多莫名其妙的问题，都是由此产生的。

1861 0

清除过的浮动

；在IE6中还需要触发 hasLayout ，例如 zoom：1； ...由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。 ...fieldset 元素在www.w3.org里目前没有任何有关这个触发行为的信息，直到HTML5标准里才出现。...综上所述：在支持BFC的浏览器（IE8+，firefox，chrome，safari）通过创建新的BFC闭合浮动；在不支持 BFC的浏览器（IE6-7），通过触发 hasLayout 闭合浮动。...里面内容为空,一丝冰凉是不推荐这样做的,firefox直到7.0 content:”" 仍然会产生额外的空隙； 5）zoom：1 触发IE hasLayout。

8612 0

清除浮动的几种方法

利用 clear:both 清除浮动 1.clear:both + 多余的标签 `` 将以上div放在浮动元素父级的内部 ``` css .clear1...*IE67是因为用了zoom:1触发hasLayout才清的浮动*/ .Clear2 {zoom:1;} ps....，而 overflow 被广泛使用的原因，我想应该在于，在触发 BFC 或者 hasLayout 的同时，对元素自身的定位或者表现影响有限。...在使用 auto 或者 hidden 时，需要保证容器的高度为自适应(即不显式定义height)；此外浮动元素的总宽度应该始终小于容器的宽度。...对于IE6，设置 overflow 并不能触发 hasLayout, （IE7可以！）因此需要设置其他属性，如zoom:1 width: 100% 等。

7512 0

CSS清除浮动

我们使用position：fixed，absolute和float都会造成浮动效果。浮动的弊端浮动虽然可以便于页面布局，但同时会产生一些问题，也就是我们常说的“副作用”。....浮动的元素自己会有一套排列规则，相当于在页面上面浮动着一层新的页面 1.额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐） <!...height: 0; clear:both; visibility: hidden; } .clearfix{ *zoom: 1;/*ie6...> 优点：符合闭合浮动思想，结构语义化正确缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.... 优点：代码更简洁缺点：用zoom:1触发hasLayout.

2.3K2 0

浮动元素margin-bottom失效 — IE6盒模型

HTML5学堂：虽然IE6慢慢的退出市场了，但是还是有必要了解一些兼容问题，让自己的知识有一个更好的沉淀。...margin-bottom的bug是容器div的 'zoom:1' 触发了 hasLayout，其内部浮动子元素也参与到了容器的高度计算之中在 IE6 IE7 IE8(Q)中，容器div的 'zoom...:1' 触发了 hasLayout，其内部浮动子元素也参与到了容器的高度计算之中。...进行了相应的处理，此时，在谷歌浏览器当中正常，但是在IE6，依旧不正常，第7和第8个块底部的margin没有生效。...若容器高度不定，则要避免在触发了 hasLayout 的容器内的浮动子元素上设置 'margin-bottom' 特性，可以通过为容器设置 'padding-bottom' 达到相似的效果。

7976 0

IE6浏览器常见的bug及其修复方法

IE6不支持min-height，解决办法使用css hack： .target { min-height: 100px; height: auto !...important; height: 100px; // IE6下内容高度超过会自动扩展高度 } ol内li的序号全为1，不递增。...: relative; } IE6只支持a标签的:hover伪类，解决方法...并触发hasLayout display: inline-block; *display: inline; *zoom: 1; IE6下浮动元素在浮动方向上与父元素边界接触元素的外边距会加倍...解决办法： 1）使用padding控制间距。

6263 0

谈谈CSS的浮动问题

1.使用空标签清除浮动在所有浮动标签后面添加一个空标签并定义CSS属性 clear:both 对比图：div未被撑开 ? ?...2.使用overflow 给包含浮动元素的父元素标签添加CSS属性，overflow:hidden or auto; zoom:1 ,其中zoom:1用于兼容IE6,目的是为了触发hasLayout...3.使用after伪对象清除浮动。但该方法只适用于非IE浏览器，还要注意的是使用的时候要记得为需要清除浮动元素的伪对象设置height:0; 否则该对象会比实际高出若干像素。...="box clearfix"> one 4.就是给浮动元素的父元素也浮动起来...，但这整体又浮动了所以不推荐~ 5.还有一种就是直接给浮动的元素添加属性 display：table; FF Chrome等支持，IE6/IE7测试显示不支持~ 所以还得触发hasLayout ,加上

6281 0

CSS篇(010)-清除浮动的方式有哪些及优缺点？

什么是clear:both clear:both：本质就是闭合浮动，就是让父盒子闭合出口和入口，不让子盒子出来清除浮动的方法（最常用的4种） 1.额外标签法（在最后一个浮动标签后，新加一个标签，...1px solid deeppink; overflow: hidden; } 优点：代码简洁缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素不推荐使用 3.使用...; height: 0; clear: both; visibility: hidden; } .clearfix { *zoom: 1; /*ie6清除浮动的方式...：符合闭合浮动思想，结构语义化正确缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout....="footer"> 此时的效果为优点：代码更简洁缺点：用zoom:1触发hasLayout.

5392 0

CSS技巧（一）：清除浮动

清除浮动方法方法一：使用带clear属性的空元素在浮动元素后使用一个空元素如，并在CSS中赋予.clear{clear:both;}属性即可清理浮动...方法二：使用CSS的overflow属性给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置...）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。...: both; visibility: hidden; } .clearfix { /* 触发 hasLayout */ zoom: 1; } <div class="news...需要注意的是为了IE6和IE7浏览器，要给clearfix这个class添加一条zoom:1;触发haslayout。

8031 1

hasLayout IE浏览器bug的来源

HTML5学堂：IE6浏览器曾经“坑”了一代又一代的前端工程师，了解浏览器兼容问题的同时，抱着“理科思维”的我们，必然会去思考为何IE6会这么“坑”，所以，我们来说说IE6浏览器bug的根源-haslayout...hasLayout是什么 hasLayout是IE特有的一个属性。很多的ie下的css bug都与其息息相关。...这个时候可以尝试触发父容器及其中的子容器的haslayout属性，通常可以通过加上zoom: 1;来调试。直到找到了产生问题的元素，再进行针对性的修正。最好的办法是对这个元素设置尺寸属性。...而对于ie6和更早版本中触发一个元素hasLayout的方法是在overflow属性是visible的情况下设置这个元素的高度属性为1%，然后对其他浏览器隐藏这个设置。...ie7还有一些额外的属性可以触发该属性（不完全列表）： min-height: (任何值) max-height: (任何值除了none) min-width: (任何值) max-width: (任何值除了

8264 0

浮动元素容器的clearing问题

1. 问题的由来有这样一种情形：在一个容器（container）中，有两个浮动的子元素，如图一。...我们添加一条IE 6的独有命令"zoom:1;"就行了，这条命令的作用是激活父元素的"hasLayout"属性，让父元素拥有自己的布局。（它的具体含义，请参见本文的附录。）...一书的中译本《精通CSS 高级Web标准解决方案》第154页，人民邮电出版社，2007） IE使用Layout概念来控制元素的尺寸和位置。...） hasLayout是IE特有的属性，不是CSS属性。...hasLayout是一个只读属性，所以无法使用Javascript进行设置。 [参考阅读] * On having layout （完）

6332 0

CSS魔法堂：hasLayout原来是这样!

并且默认产生新BFC的只有html元素，而默认hasLayout为true的元素就不只有html元素了。...zoom: (除 normal 外任意值) IE7 还有一些额外的属性(不完全列表)可以触发 hasLayout ： min-height: (任意值) min-width: (任意值) max-height...以前的版本（也包括 IE6 及以后所有版本的混杂模式，其实这种混杂模式在渲染方面就相当于 IE 5.5），通过设置任何元素的 'width' 或 'height'（非auto）都可以触发 hasLayout...context； 1.2 生成 block formatting context 但是没有触发 hasLayout 的元素，通过设置 'zoom:1'，使其触发 hasLayout。...感谢谈谈BFC与ie特有属性hasLayout RM8002: 不能同时在 IE6 IE7 IE8(Q) 中触发 hasLayout 并在其他浏览器中创建 Block Formatting Context

6876 0

自定义按钮~自适应布局~常见bug

> 按钮组合灵活使用display inline-block设置下拉列表 1 89 90 二、BUG 问题：如果参照物没有触发haslayout，那么在ie6中“绝对定位的容器”的left和bottom就会有问题解决方案：在“相对定位的父容器...”上加入 zoom:1 来触发ie的haslayout即可解决小技巧：通常我们在设置一个容器为position:relative的时候，都会加上zoom:1来解决很多ie下的问题问题：在ie67...class="foot"> 45 46 前自定义后跟随定义两层结构，利用magin的负值保持跟随者在尾部的空间表头固定内容滚动的表格给内容设置最大高度值...，超出时使用滚动条注意：overflow-y是用来给div进行裁剪的，所以tbody部分需要在div中 table>head,div(table>tbody) 纯CSS手风琴通过列表显示图片，定义ul

1.2K2 0

CSS3与页面布局学习总结（三）——BFC、定位、浮动、7种垂直居中方法

在 IE 浏览器中，一个元素要么自己对自身的内容进行组织和计算大小，要么依赖于包含块来计算尺寸和组织内容，hasLayout 与 BFC 有很多相似之处。...特别注意的是，hasLayout 在 IE 8 及之后的 IE 版本中已经被抛弃，所以在实际开发中只需针对 IE 8 以下的浏览器为某些元素触发 hasLayout。...： .floatfix{ *zoom:1; /*在旧版本的IE浏览器缩放大小，触发haslayout*/ } .floatfix:after{ content:""; display:table; clear...通俗说就是url中的#选中的id元素将被css选择。在完成没有js的菜单，选项卡时如果不考虑ie8则可以使用这种新的办法。...较为通用且兼容的清除浮动写法： .clearfix { *zoom: 1;/*在旧版本的IE浏览器缩放大小，触发haslayout（类似BFC）*

3.6K8 0

web前端面试中10个关于css高频面试题,你都会吗?

的值不为static或则releative中的任何一个在IE下, Layout,可通过zoom:1 触发 BFC布局与普通文档流布局区别: BFC布局规则: 浮动的元素会被父级计算高度(父级元素触发了...，对于HTML文档，就是HTML元素 E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1 E:nth-last-child(n) 匹配其父元素的倒数第n个子元素，第一个编号为1 E...:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置zoom:1。...，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。...需要注意的是为了IE6和IE7浏览器，要给clearfix这个class添加一条zoom:1;触发haslayout。

2.8K2 0

你是否彻底了解margin属性？

…… Margin是什么 CSS 边距属性定义元素周围的空间。通过使用单独的属性，可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。... 如果按照CSS规范，IE的“良好表现”其实是一个错误的表现，因为IE的hasLayout...margin在块元素、内联元素中的区别 HTML（这里说的是html标准，而不是xhtml）里分两种基本元素，即block和inline。...IE6/7下ul/ol标记消失bug：发生场合：当ul/ol触发了haslayout并且是在ul/ol上写margin-left，前面默认的ul/ol标记会消失。...在IE6/7下左侧应用了absolute属性的块级元素与右边的自适应的文字内容重叠。解决方法：把左侧块级元素更改为内联元素，比如把div更换为span。

8692 0

css笔记 - 张鑫旭css课程笔记

浮动的破坏性只是单纯为了实现文字环绕效果而已；清除浮动其实是清除浮动带来的影响，浮动还在基本方法： 1.在浮动元素的父元素底部插入clear:both 浮动元素和外部元素还是会有联系...用html， block水平元素底部插入一个空的div元素即可　　b....inline-block、table-cell(ie8+) width/height/*【zoom:1】/.....(ie6/7) 以上，除了zoom:1以外，其他都不能通用，因为让所有元素都float不现实但是zoom：1只在低版本ie，高版本也不兼容的。...，滥用会有ie低版本的触发haslayout导致的诡异问题

7654 0

CSS魔法堂：那不是bug，是你不懂我! by inline-block

; height: 100px; display:inline-block; } <div class="bk2 item...对于问题1，首先上面的引用很直白地告诉我们——display:inline-block能触发hasLayout，然后就没了。...结论：display:inline-block仅会触发hasLayout，而元素本该怎么排版还是怎么排版。关于hasLayout的内容可参考《CSS魔法堂：hasLayout原来是这样!》 ...(IE5.5/6/7不兼容这玩法) 引入HTML预编译引入如Jade等HTML模板引擎，开发和维护时采用可读性可维护性更高的语言，而浏览器运行时则采用效率更佳但可读性差甚至非人类友好的编码，然后通过如...但若仅仅为解决本文的问题而引入HTML模板引擎，是不是小题大造了呢？用float啦！既然上述方式皆不爽，而你又熟知float的使用和注意事项，那直接换成float就好了。

7548 0

IE7下元素的 padding-top 遇到 clear 特性在某些情况下复制到 padding-bottom

项目中使用的是DIV+CSS布局，有一个页面是同事完成的，这几天他请假有事。项目发现一个UI Bug。...在IE7下，某一个Div的padding-top会让整个div产生padding-bottom样式。在IE8/9、Firefox、Chrome下都是OK。...通过上面链接的解释是未触发hasLayout 特性。平时对这个特性接触的不多，所以不是很明白。但是之前的项目我们也未采用链接所说的解决方案，但是项目的兼容性是很不错的。...所以在需要自动扩展内容的div中嵌入一个，此时最外层不能添加height，达到内容自动扩充。...代码如下： 1: 2: 3: 元素"padding-top"会出现"padding-bottom

7125 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭