ie6 div height bug css注意点(转)
所有浏览器的定位都大同小异,在各个浏览器兼容性问题,要了解各个浏览器的定位区别就可以了。 比如,当用float浮动时,同时设置margin或padding在IE6中会是双倍的值。即你设置为margin:10px;那么在IE6里就相当于margin:20px; 出现这样的问题往往会早成定位偏移。你参考相关兼容性的相关注意点就可以了。多点动手写。
① IE6下默认的字体尺寸大致在 12 – 14px 之间,当你试图定义一个高度小于这个默认值的 div 的时候, IE 会固执的认为这个层的高度不应该小于字体的行高。所以即使你用 height:4px; 来定义了一个 div 的高度,实际在 IE 下显示的仍然是一个 12 px 左右高度的层。添加overflow: hidden; 解决问题。
<div style=”height: 4px; overflow: hidden;”></div>
② 应该多加一个属性:font-size:0px;就可以了.
③
首先要看DIV有无内容,然后才会决定谁影响其高度:
- 当DIV为一个空标签的时候:DIV有一个默认的高度(大约20px左右吧),如果hiehgt的值小于这个数字,DIV不会有任何反应,大于则可以控制;而line-height在这儿根本没有用,因为没有内容,所以也就不存在行高了。
- 当 DIV标签内有内容时(哪怕是一个 ):DIV的高度依然是默认的(依旧是20px左右),而这时候的height仍然只能 设置大于这个数的值,否则DIV不会受控制;但是,这时候却可以使用line-height来控制DIV的高度,准确来说是控制DIV内的内容行高,使 DIV受行高的变化而变化。
不过,如果你设置了height的值,那么当line-height小于height的值的时候,DIV取的是height的 值;如果line-height大于height的值,那这时候影响DIV高度的就是line-height的值了。
在其它的浏览器就不会出现这个问题,也就是说line-height大于height的时候,DIV的高度依旧是height,最多是看不见内容,但DIV的高度不会被line-height所控制。
期间有一个朋友评论说“使用overflow:hidden;第二种情况也是由height来控制了”:嘿嘿,试了一下,的确如此,当DIV的高度被line-height撑高的时候,使用overflow:hidden;则会使超出DIV高度那部份的内容不可见,从而使DIV的高度受hiehgt控制。
转载于:https://www.cnblogs.com/zhihaowang/archive/2011/08/23/10128446.html
ie6 div height bug css注意点(转)相关推荐
- CSS IE6躲猫猫Bug
在IE6中,另一个很奇怪而且让人抓狂的 Bug,就是 peek-a-boo Bug.peek-a-boo 是大人把脸一隐一现,来逗小孩发笑的一种游戏.因此,中文把它称作IE6躲猫猫Bug. IE6躲猫 ...
- ie6,ie7,ie8,ie9 css bug兼容解决记录
select {background-color:red\0; /* ie 8/9*/background-color:blue\9\0; /* ie 9*/*background-color:#dd ...
- CSS: div高度自动适应背景图片的高度 How to get div height to auto-adjust to background size?...
原文:CSS: div高度自动适应背景图片的高度 How to get div height to auto-adjust to background size? 其实方法非常简单,直接写代码: &l ...
- html页面如何变成百分之百,css height 100% CSS成功设置DIV高度百分之百
css height 100% ,使用CSS成功设置DIV高度百分之百,CSS height百分之百高度 让html中第一个div(最外层div)高度100%(height:100%)实现. 一.di ...
- html div height=,height在css里什么意思?
height在css里是高度的意思,是CSS中的高度属性.下面本篇文章就来给大家介绍一下CSS height属性,希望对大家有所帮助. height属性设置元素的高度. height属性定义元素内容区 ...
- IE6浏览器的bug问题及相关解决的方法
IE6浏览器的bug问题及相关解决的方法 1.css浮动边距加倍错误(双倍边距BUG)的解决办法 该错误只影响ie而不影响其他浏览器,我们可以考虑用hack来解决!!! 解决方法:_displ ...
- 修复IE6重复字符Bug
在IE6中,如果一个元素中包含多个浮动元素,某些情况下,最后一个浮动元素中的最后几个字符,会在该元素的下面重复出现,被称作"IE6重复字符Bug". 当父元素的宽度减去最后一个浮动 ...
- 【IE6的疯狂之四】IE6文字溢出BUG
在IE6下使用浮动可能会出现文字重复的情况. 在IE6下,浮动层之间有注释文字的话,之前那个浮动层的内容文字就有可能遭遇一个"隐形"的复制,但是代码里查看文字可并没有多出来. 看个 ...
- html div三角形,【div】纯CSS绘制三角形
原标题:[div]纯CSS绘制三角形 我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使 ...
最新文章
- JavaScript toFixed(num) 函数
- 1_自然语言处理简介、数据源、应用领域、课程体系
- Word2vec加TextRank算法生成文章摘要
- 这帮吃货程序猿,给阿里食堂来了一波骚操作
- linq to sql 行转列_SQL 难题:行转列
- MongoDB 谨防索引seek的效率问题【华为云技术分享】
- 【java】理解和运用Java中的Lambda
- 如何搜索旅行的好地方(MongoDb LINQ和.NET Core)
- 最速下滑法c语言程序,最速下降法 C语言.doc
- 修改版本名称及手机型号
- 宽度学习详解(Broad Learning System)
- rails 杂记 - erb 中的 form_helper
- android点赞功能源码,Android实现朋友圈点赞列表
- 香槐路的香槐花,匆匆四年无归期。
- ansible一键部署zabbix并配置自动发现
- 超赞!世界10个著名悖论的最终解答来了!
- k8s中使用基于nfs的storageclass
- 自动化技术实现目录全览
- docker修改系统时间总结
- 大规模LEO星座波束管理调研报告