haslayout详解_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

haslayout详解_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:36 AM

定义

　　haslayout是IE7-浏览器的特有属性。hasLayout是一种只读属性，有两种状态:true或false。当其为true时，代表该元素有自己的布局，否则代表该元素的布局继承于父元素。
　　[注意]通过element.currentStyle.hasLayout可以得出当前元素的hasLayout情况

默认触发hasLayout的标签　

　　【1】html,body
　　【2】table,tr,th,td
　　【3】img
　　【4】hr
　　【5】input,button,select,textarea,fieldset
　　【6】frameset,frame,iframe

触发hasLayout的CSS属性

　　【1】display:inline-blcok
　　【2】height/width:除了auto
　　【3】float:left/right
　　【4】position:absolute
　　【5】writing-mode(IE专有属性，设置文本的垂直显示):tb-rl
　　【6】zoom(IE专有属性，设置或检索对象的缩放比例):除了normal

【IE7专有的触发hasLayout的CSS属性】

　　【1】min-height/max-height/min-width/max-width:除none
　　【2】overflow\overflow-x\overflow-y:除visible
　　【3】position:fixed

用途

　　【1】解决IE7-浏览器下父级边框不阻止子级上下margin传递的bug

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{    margin: 0;}ul{    margin: 0;    padding: 0;    list-style: none;}.list{    border: 10px solid black;    background-color: red;    /*触发hasLayout*/    /*float:left;*/}.in{    height: 100px;    width: 100px;    margin-top: 50px;    background-color: blue;}</style></head><body><ul class="list">    <li class="in"></li></ul></body>    </html>

　　【2】配合display:inline让块元素模拟inline-block

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{    margin: 0;}.box{    width: 100px;    height: 100px;    background-color: red;    display:inline-block;    /*配合display:inline触发hasLayout*/    /*     float:left;    display:inline; */}</style></head><body><div class="box" id="box"></div><span>测试inline-block用</span></body>    </html>

　　【3】解决在IE7-浏览器下LI4px空隙bug(IE7-浏览器下li有高度或宽度或zoom:1，且仅包含内联元素，且内联元素被设置为display:block，li下会多出3px的垂直间距)

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{    margin: 0;}ul{    margin: 0;    padding: 0;    list-style: none;}.list{    width: 200px;    background-color: lightgreen;}.in{    height: 100px;    background-color: lightblue;}.span{    display: block;    zoom:1;}</style></head><body><ul class="list">    <li class="in">        <span class="span">1231</span>    </li>    <li class="in">        <span class="span">1232</span>    </li></ul></body>    </html>

　　【4】触发浮动元素的父级的hasLayout，浮动元素会被layout元素自动包含，相当于IE7-浏览器下实现清浮动

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{    margin: 0;}ul{    margin: 0;    padding: 0;    list-style: none;}.list{    background-color: lightgreen;    height: 200px;}.in{    float: left;    width: 100px;    height: 100px;    border: 1px solid black;    background-color: lightblue;}.test{    width: 100px;    height: 150px;    background-color: yellow;}</style></head><body><ul class="list">    <li class="in"></li>    <li class="in"></li></ul><div class="test">测试浮动</div></body>    </html>

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

公众号网页更新缓存难题：如何避免版本更新后旧缓存影响用户体验？Mar 04, 2025 pm 12:32 PM

公众号网页更新缓存，这玩意儿，说简单也简单，说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章，结果用户打开还是老版本，这滋味，谁受得了？这篇文章，咱就来扒一扒这背后的弯弯绕绕，以及如何优雅地解决这个问题。读完之后，你就能轻松应对各种缓存难题，让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存，说白了就是浏览器或者服务器为了提高访问速度，把一些静态资源（比如图片、CSS、JS）或者页面内容存储起来。下次访问时，直接从缓存里取，不用再重新下载，速度自然快。但这玩意儿，也是个双刃剑。新版本上线，