【IE大叔的嘴歪眼斜】之—— 由hasLayout引发的临床CSS Bug表
IE大叔这嘴歪眼斜的毛病不是一天两天了,集体拉出来测试时候,明明大家都在微笑,就丫一副呲牙咧嘴的......
哎,没办法,谁让咱国内市面上都是这种呲牙咧嘴的浏览器呢.....(关注IE678死亡速度)
查阅,翻读,摘抄,记录,再逐一实践,总结,终于对他这个臭毛病有了根源上的认识。
hasLayout!
先上定义:
它是IE的特有属性。它决定着一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算组织内容。为了区别这两个概念,渲染引擎采用了hasLayout的属性,true或false,当属性为true时,我们说这个元素触发了布局(Layout)。
具有hasLayout属性的标签:
- <html>,<body>
- <table>,<tr>,<td>,<td>
- <img>
- <hr>
- <input>,<button>,<select>,<textarea>,<fieldset>,<legend>
- <iframe>,<embed>,<object>,<applet>
- <marquee>
这个属性存在的意义?
当一个元素对象的layout被激活时候,它和它的子元素的定位和尺寸计算将独立进行,也就是独立布局,因此浏览器会消耗更多的代价来处理拥有layout的元素。为了提高性能,IE整出了个这么个私有属性。
可触发hasLayout的CSS特性:
display: inline-block
height:(除了auto之外任何值)
width:(除了auto之外任何值)
float:(left|| right)
position:absolute
writing-mode:tb-rl
zoom:(除了normal之外任何值)
IE7可触发hasLayout的CSS特性:
min-height:(任意值)
min-width:(任意值)
max-height:(除none之外任意值)
max-width:(除none之外任意值)
overflow:(除visible之外任意值,仅用于块级元素)
overflow-x:(除visible之外任意值,仅用于块级元素)
overflow-y:(除visible之外任意值,仅用于块级元素)
position:fixed
再来看看嘴歪眼斜的临床表现:(以下内容均本人亲测)
问题 | 浏览器 | DEMO | 解决办法 | |
1 | input[button | submit]未居中 | IE8 | bug | fixed | 添加width |
2 | body{overflow:hidden;}没有去掉滚动条 | IE6/7 | bug | fixed | 改成html{overflow:hidden;} |
3 | 拥有hasLayout的标签有高度 | IE6/7 | bug | fixed | 添加_overflow:hidden;*height:0 |
4 | form>[hasLayout]元素有margin-left时,子元素中的[input | textarea] 出现2×margin-left | IE6/7 | bug | fixed |
form > [hasLayout 元素]{margin-left:宽度;} form div{*margin-left:宽度÷2;} |
5 | 当子元素有position:relative的时候,父元素设置overflow:[hidden|auto]相当于给子元素设置了position:visible; | IE6/7 | bug | fixed | 给父元素设置position:relative; |
6 | 列表中混乱的浮动:在list中浮动图片时,图片出现溢出正常位置;或没有list-style | IE8 | bug | fixed | 用背景图片替换list-style |
7 | th 不会自动继承上级元素的 text-align | IE8 | bug | fixed | 给th添加text-align:inherit; |
8 | 样式(包括link/style/@import(link)) 最多允许个为是:32 | IE6-8 | ─ 常识 | 99.99%的情况下,不会遇到 |
9 | PNG图片中的颜色和背景颜色的值相同,但显示不同 | IE6-7 | bug | fixed | 利用 pngcrush 去除图片中的 Gamma profiles |
10 | margin:0 auto; 不能让block元素水平居中 | IE6-8 | bug | fixed | 给block元素添加一个width |
11 | 使用伪类 :first-line | :first-letter, 属性的值中出现!important 会使属性失效 | IE8 | bug | fixed | !important is evil, don’t use it anymore |
12 | :first-letter 失效 | IE6 | bug | fixed | 把 :first-letter 移到离{}最近的地方,如 h1, p:first-letter{},而非 p:first-letter h1{} |
13 | Position:absolute元素中,a display:block, 在非:hover时只有文本可点击 | IE6/7 | bug | fixed | 给a添加background, 如果背景透明,使用background:url(‘任何页面中已经缓存的文件链接’),不推荐background:url(#)[官方的解决方法],因为会增加一下HTTP请求 |
14 | dt, dd, li 背景失效 | IE6 | bug | fixed | dt, dd, li{position:relative;} |
15 | <noscript />元素的样式在启用javascript的情况下显示了样式 | IE6-8 | bug | fixed | 利用js给<noscript />添加display:none; |
16 | li内元素偏离 baseline 向下拉 | IE8/9 | bug | fixed | 给li设置display:inline 或 float:[方向] |
17 | 列表中li的list-style不显示 | IE6/7 | bug | fixed | 给li添加margin-left,留空间来显示(不要加在ul上) |
18 | 图片不能垂直居中 | IE6/7 | bug/fixed | 添加一个空标签,并赋给”Layout”, 比如display:inline-block; |
19 | 不能自定义指针样式 | IE6-8 | bug | fixed | 给指针文件设置绝对路径 |
20 | 高度超过height定义的高 | IE6 | bug/fixed | 添加_overflow:hidden;(推荐)或者_font-size:0; |
21 | 宽度超过width定义的宽 | IE6 | bug/fixed | 添加_overflow:hidden; |
22 | 双倍边距 | IE6 | ─ 常识 | 添加display:inline到float元素中 |
23 | margin负值隐藏:hasLayout的父元素内的非hasLayout元素,使用负边距时,超出父元素部分不可见 | IE6/7 | bug/fixed | 去掉父元素的hasLayout;或者赋hasLayout给子元素,并添加position:relative; |
24 | 给两个浮动元素的某中一个的文字设定为斜体,另一个元素下拉在有斜体文字元素的下面 | IE6 | bug/fixed | 给有斜体文字的元素添加overflow:hidden; |
25 | 3px 间隔:在float元素后的元素,会有3px间隔 | IE6 | bug/fixed | 因为是确切的3px,所以,用“暴力破解”吧,比如_margin-left:-3px;或者也设置float |
26 | text-align 影响块级元素 | IE6/7 | bug/fixed | 整理你的float;或者分开设置text-align |
(PS:如若想信手拈来,玩转IE,除了强大自己之外,还需大家一起共同默默祈祷:“IE6速死,XP速死......”)
转载于:https://www.cnblogs.com/ccto/archive/2013/03/07/2948630.html
【IE大叔的嘴歪眼斜】之—— 由hasLayout引发的临床CSS Bug表相关推荐
- HTML5响应式手机模板:电商网站设计——歪秀商城手机端开发静态页面HTML+CSS+JavaScript 手机模板wap 手机网站模板 企业手机网站模板...
HTML5响应式手机模板:电商网站设计--歪秀商城手机端开发静态页面HTML+CSS+JavaScript 手机模板wap 手机网站模板 企业手机网站模板 手机网站模板 手机模板 响应式手机网站 ht ...
- HTML5响应式手机模板:电商网站设计——歪秀商城手机端开发静态页面HTML+CSS+JavaScript 手机模板wap 手机网站模板 企业手机网站模板
HTML5响应式手机模板:电商网站设计--歪秀商城手机端开发静态页面HTML+CSS+JavaScript 手机模板wap 手机网站模板 企业手机网站模板 手机网站模板 手机模板 响应式手机网站 ht ...
- word单元格斜网格_如何在Word中的所有表上显示和隐藏单元格网格线
word单元格斜网格 By default, when you create a new table, all the cells have black borders that print with ...
- 桑叶黑芝麻糊,从头到脚通补
人体通补手册:丹道医学中的养命之术/武国忠著. -南京:江苏人民出版社,2009.8(国医健康绝学系列)ISBN 978-7-214-05938-3 桑叶黑芝麻糊,从头到脚通补 桑叶味甘.苦,性寒,可 ...
- 图像识别(3)---验证码篇
讲人工神经网络之前,先说一下生物神经网络:一般指生物的大脑神经元,细胞,触点等组成的网络,用于产生生物的意识,帮助生物进行思考和行动.相比之下,人工神经网络之所以有人工二字,就是人工模拟生物神经网络的 ...
- 纯前端实现人脸识别-提取-合成
2017-09-17 前端大全 (点击上方公众号,可快速关注) 来源:雅X共赏 http://refined-x.com/2017/09/06/纯前端实现人脸识别-提取-合成/ 如有好文章投稿,请 ...
- 夏季养生要以“清”为贵
夏季气候对人类的健康有着正反两方面的影响.其气温高气压低的特点,一方面有利于心血管病人康复,另一方面也使人们经常有胸闷.头晕的感觉.结合气候特点,夏季养生应以"清"为贵,切勿以冷抗 ...
- 关于stable diffusion的embedding训练的一篇随笔
前言 嗯,因为最近ai绘画很火啊,而且可以本地部署,很多人开始投喂ai然后画一些喜欢的东西,这是刚接触4天的笔记,那么我整理下目录,来展示一下这篇笔记都有什么吧. 1,绘画的关键词和反向关键词 2,调 ...
- 读《万一针》老中医万方琴五十年针灸心得
万老师的行医特点:不用药,针灸取穴少,患者感觉舒服,疗效突出.万老师认为痛则不通,不通则痛,气血滞瘀导致,通过银针疏通经络,以去百病.常用细针,一般疾病取穴1-5穴,肩周炎.腰痛.肋间神经痛.落枕.坐 ...
最新文章
- 水稻微生物组时间序列分析2b-散点图拟合
- 原生态的ajax 及json和gson学习资源
- 为ML带来拓扑学基础,Nature子刊提出拓扑数据分析方法
- JBOSS通过Apache负载均衡方法一:使用mod_jk
- linux7.2 静态IP设置,Centos 7 学习之静态IP设置
- 5.4寸iPhone 12真机曝光:可单手握住的快乐!
- 限制码率的视频编码标准比较(包括MPEG-2,H.263, MPEG-4,以及 H.264)
- 总结篇——nginx代理服务器
- 自动驾驶高精地图-概述与分析
- matlab 输出一行字,MATLAB输出结果的格式设置
- 帆软报表 异常汇总及方案.
- Xshell暴漏内网端口
- vlan间路由的实现(思科模拟器)
- VS2005/SQL2005等原版镜像高速下载
- FPGA存储块,有没有使能Primitives output Register作用
- Python之建模数值逼近篇–最小二乘拟合
- Creo 产品高级装配视频教程
- MongoDB体系结构
- Swing错鸡包 特殊历史脚本
- 如何优雅的写一篇安利文-以Sugar ORM为例
热门文章
- httpd 处理模型
- WIN10远程连接时提示内部错误
- 刷题总结——xor(ssoj)
- Net基础篇_学习笔记_第十二天_面向对象继承(字符串_字符串的不可变性)
- 内存数据库和关系数据库之间的数据同步原理
- 【零基础学习iOS开发】【02-C语言】05-进制
- Override and Overload (重写和重载)
- lighttpd,thttpd,shttpd - 轻量级WebServer介绍
- js 位运算符 ~, ,| ,^
- Failed to resolve: android.arch.lifecycle:runtime:1.0.0,Failed to resolve: support-v4