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

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

这篇文章是为了和大家分享IE8下DIV嵌套出现错误怎么办。我觉得边肖很实用,就和大家分享一下作为参考。让我们跟着边肖看一看。

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

最近用DIV写了几个网页。一开始,我从未在IE8下测试过。最近升级了IE8,发现很多问题。一开始出现了IE6和IE7没有发现的新问题,大概是以下三种方法。分享给大家!

dividdivid=" a1Primedividdivid=" b1Prime/div dividevid=" B2Prime;/div/div当b1和b2都是float=left时,a1层的高度不会被b1和b2的高度扩展。(这种现象只发生在IE8,其他版本的IE和IE8选择兼容模式后没有问题。)

解决方案:显示=a1的表格

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

不同的浏览器在CSS解析上可能会有差异,所以在IE6和IE7中可以正常显示的CSS DIV页面在IE8和FF(火狐)浏览器中可能不正常,需要特别注意。下面的代码在FF和IE8下无法正常显示DIV块的内容,只有一条两像素高的红线(其实是上下边框被挤在一起的结果)mdashmdash

CSS:

# main { margin:auto宽度width:400px背景色: # 336699;border:1pxsolid # ff0000} DIV : divid divid=' main '/div ie8和div在FF浏览环境中的嵌套效果:

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

这意味着当我们将main作为DIV的父层,并且DIV的几个子层嵌套在其中时,父层的样式将被忽略或根本无效,这可能会导致严重的问题。我们必须找出原因。原来在IE8和FF环境下,不会显示没有内容、高度未定义的DIV。在上面的代码中,如果我们给main定义一个高度,或者把divide=' main '/div改成divide=' main ' hello/div,那么在IE8和FF下预设效果会正常显示。

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

IE8和FF是否将层中的DIV视为实体HTML元素?现在让我们试试DIV嵌套效果:

CSS:

# main { margin:auto宽度width:400px背景色: # 336699;border:1pxsolid # ff0000} # sub { width:200px背景-color : # AAA;float:left} div : dividdid=' main ' dividdid=' sub ' hello world!br/HiGod!IE8和FF下的/div/div嵌套效果如下图所示:

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

显然,id main的父DIV嵌套不被id sub的内部子DIV支持,整体风格严重扭曲。一个简单的方法就是在* * * a子层DIV结束后添加一个高度为0像素的DIV,DIV不允许两边都有浮动对象:

dividevid=' main ' dividevid=' sub ' hello world!br/HiGod!br/OK?/div style div style=' height :0 px;clear:both'第二个解决方案是定义一个CSS类:

{ content : }后的. box :显示:块;height:0pxclear:both可见性:隐藏;}然后将父div代码中的DIVid=' main '更改为divid='main' class=' box '。

以上两种方法会产生DIV嵌套效果,如下图所示:

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

感谢阅读!这篇关于“IE8下DIV嵌套出现错误怎么办”的文章就分享到这里了,希望。

内容来源网络,如有侵权,联系删除,本文地址:https://www.230890.com/zhan/73735.html

(0)

相关推荐

  • 网站或者APP短信验证码是如何实现的

    技术网站或者APP短信验证码是如何实现的这篇文章主要介绍了网站或者APP短信验证码是如何实现的,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。短信验证码下发

    攻略 2021年11月30日
  • element-plus 原生开发 日期国际化语言

    技术element-plus 原生开发 日期国际化语言 element-plus 原生开发 日期国际化语言官网提供国际化语言解决办法:https://element-plus.org/zh-CN/gui

    礼包 2021年11月10日
  • HTTP代理和SOCKS之间有什么区别

    技术HTTP代理和SOCKS之间有什么区别这期内容当中小编将会给大家带来有关HTTP代理和SOCKS之间有什么区别,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。Socket secur

    攻略 2021年11月11日
  • Redis的底层数据结构-整数集合

    技术Redis的底层数据结构-整数集合 Redis的底层数据结构-整数集合整数集合(intset)是Redis用于保存整数值的集合抽象数据类型,它可以保存类型为int16_t、int32_t 或者int

    礼包 2021年11月11日
  • 如何解析element-ui中upload组件传递文件及其他参数的问题

    技术如何解析element-ui中upload组件传递文件及其他参数的问题如何解析element-ui中upload组件传递文件及其他参数的问题,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解

    攻略 2021年11月9日
  • 怎么实现RabbitMQ消息中间件的工作原理和使用

    技术怎么实现RabbitMQ消息中间件的工作原理和使用这篇文章将为大家详细讲解有关怎么实现RabbitMQ消息中间件的工作原理和使用,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定

    攻略 2021年12月3日