文章详情

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

请输入下面的图形验证码

提交验证

短信预约提醒成功

IE8下DIV嵌套出现错误怎么办

2024-04-02 19:55

关注

这篇文章给大家分享的是有关IE8下DIV嵌套出现错误怎么办的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

IE8下DIV嵌套出现错误解决方案

最近用DIV写了几个网页,一开始呢,从来没有在IE8下面测试过,最近升级了IE8,发现了好些问题,一开始用IE6和IE7都没有的新问题出现了,大概就是以下的三种方法,与君共勉!

<dividdivid=”a1&Prime;>  <dividdivid=”b1&Prime;></div>  <dividdivid=”b2&Prime;></div>  </div>

当b1和b2都是float=left时候,a1层的高度不会被b1和b2的高度撑开。(这个现象只有IE8发生,其他版本IE以及IE8选择兼容模式后就没有问题。)

解决方法:a1的display=table

=================================

不同的浏览器对CSS的解析可能存在出入,因此能在IE6和IE7正常显示的CSS+DIV页面在IE8和FF(即Firefox)浏览器中未必正常,需要格外留意。以下代码在FF和IE8下无法正常显示出DIV块的内容,仅有一条两个像素高度的红线(其实是上、下边框挤在一处的结果)&mdash;&mdash;

CSS:

#main{  margin:auto;  width:400px;  background-color:#336699;  border:1pxsolid#ff0000;  }   DIV:<dividdivid="main"></div>

IE8和FF浏览环境下的DIV嵌套效果:

IE8下DIV嵌套出现错误怎么办

这意味着,当我们把main作为DIV的父层,里面嵌套若干子层的DIV时,父层的样式将是被忽略的或者根本就是无效的,这将可能发生严重的问题。我们必须找出原因。原来,在IE8和FF环境下,一个没有任何内容的不定义高度的DIV是不会显示的。以上代码中,我们若给main定义一个高度,或将<divid="main"></div>改为<divid="main">Hello</div>,IE8和FF下将正常显示我们预设的效果。

嵌套DIV之后情形又如何呢?

里层的DIV是否被IE8和FF视为实体HTML元素?现在我们就来试验一下DIV嵌套效果:

CSS:

#main{  margin:auto;  width:400px;  background-color:#336699;  border:1pxsolid#ff0000;  }   #sub{  width:200px;  background-color:#aaa;  float:left;  }   DIV:   <dividdivid="main"> <dividdivid="sub"> HelloWorld!<br/>HiGod!  </div> </div>

在IE8和FF下的DIV嵌套效果如下图所示:

 IE8下DIV嵌套出现错误怎么办 

显然,id为main的父层DIV嵌套没有被id为sub的里层子DIV撑高,整体样式出现严重的走样效果。一个简便的处理方法是,在***一个子层DIV结束之后加上一个高度为0像素的DIV,且该DIV不允许两边有浮动对象:

<dividdivid="main"> <dividdivid="sub"> HelloWorld!<br/>HiGod!<br/>OK?  </div> <divstyledivstyle="height:0px;clear:both;"></div> </div>

第二种解决方法是定义一个CSS类:

.box:after{  content:".";  display:block;  height:0px;  clear:both;  visibility:hidden;  }

然后将父层DIV代码中的<divid="main">改为<divid="main"class="box">。

以上两种方法都将出现如下图所示的DIV嵌套效果:

IE8下DIV嵌套出现错误怎么办

感谢各位的阅读!关于“IE8下DIV嵌套出现错误怎么办”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

阅读原文内容投诉

免责声明:

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

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

软考中级精品资料免费领

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

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

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

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

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

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

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