所有浏览器的定位都大同小异,在各个浏览器兼容性问题,要了解各个浏览器的定位区别就可以了。 比如,当用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有无内容,然后才会决定谁影响其高度:

  1. 当DIV为一个空标签的时候:DIV有一个默认的高度(大约20px左右吧),如果hiehgt的值小于这个数字,DIV不会有任何反应,大于则可以控制;而line-height在这儿根本没有用,因为没有内容,所以也就不存在行高了。
  2. 当 DIV标签内有内容时(哪怕是一个&nbsp;):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注意点(转)相关推荐

  1. CSS IE6躲猫猫Bug

    在IE6中,另一个很奇怪而且让人抓狂的 Bug,就是 peek-a-boo Bug.peek-a-boo 是大人把脸一隐一现,来逗小孩发笑的一种游戏.因此,中文把它称作IE6躲猫猫Bug. IE6躲猫 ...

  2. ie6,ie7,ie8,ie9 css bug兼容解决记录

    select {background-color:red\0; /* ie 8/9*/background-color:blue\9\0; /* ie 9*/*background-color:#dd ...

  3. 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 ...

  4. html页面如何变成百分之百,css height 100% CSS成功设置DIV高度百分之百

    css height 100% ,使用CSS成功设置DIV高度百分之百,CSS height百分之百高度 让html中第一个div(最外层div)高度100%(height:100%)实现. 一.di ...

  5. html div height=,height在css里什么意思?

    height在css里是高度的意思,是CSS中的高度属性.下面本篇文章就来给大家介绍一下CSS height属性,希望对大家有所帮助. height属性设置元素的高度. height属性定义元素内容区 ...

  6. IE6浏览器的bug问题及相关解决的方法

    IE6浏览器的bug问题及相关解决的方法 1.css浮动边距加倍错误(双倍边距BUG)的解决办法   该错误只影响ie而不影响其他浏览器,我们可以考虑用hack来解决!!!   解决方法:_displ ...

  7. 修复IE6重复字符Bug

    在IE6中,如果一个元素中包含多个浮动元素,某些情况下,最后一个浮动元素中的最后几个字符,会在该元素的下面重复出现,被称作"IE6重复字符Bug". 当父元素的宽度减去最后一个浮动 ...

  8. 【IE6的疯狂之四】IE6文字溢出BUG

    在IE6下使用浮动可能会出现文字重复的情况. 在IE6下,浮动层之间有注释文字的话,之前那个浮动层的内容文字就有可能遭遇一个"隐形"的复制,但是代码里查看文字可并没有多出来. 看个 ...

  9. html div三角形,【div】纯CSS绘制三角形

    原标题:[div]纯CSS绘制三角形 我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使 ...

最新文章

  1. JavaScript toFixed(num) 函数
  2. 1_自然语言处理简介、数据源、应用领域、课程体系
  3. Word2vec加TextRank算法生成文章摘要
  4. 这帮吃货程序猿,给阿里食堂来了一波骚操作
  5. linq to sql 行转列_SQL 难题:行转列
  6. MongoDB 谨防索引seek的效率问题【华为云技术分享】
  7. 【java】理解和运用Java中的Lambda
  8. 如何搜索旅行的好地方(MongoDb LINQ和.NET Core)
  9. 最速下滑法c语言程序,最速下降法 C语言.doc
  10. 修改版本名称及手机型号
  11. 宽度学习详解(Broad Learning System)
  12. rails 杂记 - erb 中的 form_helper
  13. android点赞功能源码,Android实现朋友圈点赞列表
  14. 香槐路的香槐花,匆匆四年无归期。
  15. ansible一键部署zabbix并配置自动发现
  16. 超赞!世界10个著名悖论的最终解答来了!
  17. k8s中使用基于nfs的storageclass
  18. 自动化技术实现目录全览
  19. docker修改系统时间总结
  20. 大规模LEO星座波束管理调研报告

热门文章

  1. UVA 3485 Bridge
  2. (转)MySQL自带的性能压力测试工具mysqlslap详解
  3. 二分法查找和普通查找
  4. Linux命令:mkdir
  5. Linux-正则表达式学习(精)
  6. Oracle新手笔记(2) 关于Oracle 9i或9i以上版本客户端连接Oracle 8i及8i版本以下服务器端中文字符乱码的解决办法...
  7. GooglePR说明
  8. 前端 crypto-js aes 加解密
  9. Swift傻傻分不清楚系列(八)函数
  10. Vue中watch的简单应用