文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

如何深入剖析CSS布局中DIV为空时在IE6的不同表现

2024-04-02 19:55

关注

如何深入剖析CSS布局中DIV为空时在IE6的不同表现,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

CSS布局中DIV为空时在IE6的不同表现

在实际应用中为了特殊的需要而用到一个空的DIV,并定义一个较小的高度值.通常的想法见下面代码:

HTML

<div></div> CSS  div{  height:5px;  }

以上代码在多数浏览器中都可正确显示,但我们在实际运用中,确不象理论上这么简单,特别的IE6中并非如你所想,好象有时可以定义高度,有时它就不知何原因失效了!

[Ctrl+A全部选择提示:你可先修改部分代码,再按运行]

◆分析:从代码中我总结了一些知识点

1.当一个空DIV只给高度时,它的高度在IE6下是可控的.一些元素如background-color,border...都不会影响高度的值;

2.如样式中有了height的话那IE会默认会有一个高度,其它的值如zoom:1也会产生这个"layout"可以自己尝试测试其它样式;

3.空DIV如果付与了一个"layout"的话,那么它的高度就与文字大小有关了,具体的文字大小所显示的实际高度值从测试页中可见;

4.可以看出IE所能显示的文字的最小高度值为2PX;

5.在实际解决问题中,我们就根据它的特点,因材施教,在样式中加入font-size:数值;如果height:12px;那么你的font-size要小于等于10px,也就是***值可取到10px;在大的话会被文字撑开(撑开内容是IE6以下版本的一个BUG),所以最省事的方法也就是设置文字大小为0;

以都是用设字体大小的办法解决问题,有的人还要加入一个行高,经测试行高对高度没有影响.所以加入行高没有必要.

第二个解决问题的方法是加入overflow:hidden;思路就是超出部分隐藏起来,这也是一个很好的方法!

说了那么多,我们只是的用测试的手段来分析一下总结出它的规律,当做一个技术研究,这样印象也深入一些,其实就两种方法,你只要记住这两种方法就可以了.

◆***种方法:

div{  font-size:0;  }

◆第二种方法

div{  overflow:hidden;  }

看完上述内容,你们掌握如何深入剖析CSS布局中DIV为空时在IE6的不同表现的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注编程网行业资讯频道,感谢各位的阅读!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯