`

ie8中 position:relative定义的层不能正常显示

    博客分类:
  • HTML
阅读更多

无意打开IETester在IE8下测试了一个页面,突然发现一个父级position:relative;子级position:absolute;的样式焦点轮播的时候在IE8下居然是错位的。仔细看了一下,发现IE8居然不认父级的相对定位,直接就是在屏幕上显示绝对定位。

在我的系统中IE6,IE7下显示正常,解决办法

<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
改成

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>

或者直接在原

<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>下面加上

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>

通过以上方式修复您的网站后,将强制 Windows Internet Explorer 8 以类似 Windows Internet Explorer 7 呈现页面的方式来呈现页面。

分享到:
评论

相关推荐

    css中position:relative和overflow:hidden之间的问题

    在本问题中,我们主要关注`position:relative`和`overflow:hidden`之间的交互,以及在不同浏览器(尤其是IE6和IE7)中的表现差异。 `position`属性用于定义元素的定位模式,它有多种值,如`static`(默认值)、`...

    JS解决position:sticky的兼容性问题的方法

    computed属性中定义了一个getPosition的计算属性,这个属性会检测当前浏览器是否支持position:sticky属性,如果不支持,则使用'relative'替代,这样就不会影响浏览器文档流和滚动条的高度。 在methods方法中定义了...

    js完美解决IE6不支持position:fixed的bug

    其中一个典型的问题是IE6不支持CSS中的`position:fixed`属性,这个属性允许元素在页面滚动时保持其在屏幕上的位置,常用于创建导航栏或页脚等固定位置的元素。 `position:fixed`在其他现代浏览器中工作良好,但在IE...

    垂直居中ie8+

    在网页设计中,"垂直居中ie8+"是一个常见的需求,指的是在Internet Explorer 8及更高版本的浏览器中实现元素的垂直居中对齐。在IE8+支持CSS的多种方法,使得开发者能够灵活地处理不同场景下的垂直居中问题。下面我们...

    IE又一个让人吐血的BUG: 关于 table的position 和 select

    然而,在IE中,当`table`元素的`position`被设置为非`static`时,可能会破坏其默认的布局行为,特别是在与`select`元素结合使用时,可能会导致`select`下拉菜单无法正常显示或操作。 `select`元素是用来创建下拉...

    ie6中页面的bug

    在Web开发过程中,尤其是针对IE6浏览器,开发者经常会遇到各种显示异常的问题,这些问题是由于IE6浏览器本身的渲染机制和对CSS标准支持不完全所导致的。以下是一些常见的IE6 bug及其解决方案: 1. **DOCTYPE声明**...

    CSS的下拉菜单,支持IE6 IE7 Firefox

    ### CSS的下拉菜单,支持IE6 IE7 Firefox #### 概述 本文将详细介绍一个兼容Internet Explorer 6(IE6)、Internet Explorer 7(IE7)以及Firefox浏览器的纯CSS下拉菜单实现方法。该下拉菜单不仅具有良好的跨浏览器...

    css里的z-index的使用

    2. **IE6/IE7中的层叠上下文问题**:IE6/IE7在处理层叠上下文方面存在问题,可能导致元素的堆叠顺序不符合预期。例如,即使一个元素的z-index值设置得非常高,它仍然可能被其他z-index值较低的元素覆盖。 3. **Fire...

    IE6中DIV使用了relative不定义宽度导致right定位误差

    在IE6中,当一个绝对定位的元素(`position: absolute`)的父级元素设置了`position: relative`但没有定义宽度时,`right`属性的计算会出现错误。 首先,理解`relative`定位。相对定位意味着元素相对于它原本在正常...

    IE6/7在滚动区域内的标签使用position会飘出这个滚动区域不随滚动条滚动

    `position`属性用于定义元素在页面上的定位方式,主要有`static`(默认值,正常流布局)、`relative`(相对定位,相对于其正常位置进行偏移)、`absolute`(绝对定位,相对于最近的非`static`定位祖先元素定位)和`...

    纯DIV+CSS制作的竖向三级弹出菜单代码

    - **兼容性处理**:对于不完全支持CSS3的老旧浏览器,如IE6,使用条件注释添加特定CSS规则,保证在这些浏览器中菜单也能正常工作。 综上所述,纯DIV+CSS制作的竖向三级弹出菜单不仅体现了前端开发中HTML与CSS的灵活...

    纯CSS的下拉菜单,支持IE6,IE7,Firefox

    2. IE6不支持透明度,所以我们可以为它定义一个背景色,以模拟过渡效果: ```css .dropdown ul { background-color: rgba(255, 255, 255, 0); /* 非IE6/7浏览器 */ filter: progid:DXImageTransform.Microsoft....

    鼠标放上上下移动块(兼容IE8以上)

    本文将深入探讨如何实现这种效果,并确保其在IE8及以上的浏览器中兼容。 首先,我们要明白这种效果的实现原理。通常,我们会使用CSS(层叠样式表)和JavaScript来完成。在CSS中,我们可以定义一个块级元素的初始...

    CSS实现三层滑动门技术

    虽然CSS滑动门技术在现代浏览器中表现良好,但在一些旧版浏览器(如IE6)中可能会存在问题。为确保兼容性,可以使用条件注释或者CSS Hack来提供针对旧版浏览器的备用样式。同时,确保所有的背景图像在所有分辨率和...

    css常见的bug(ie)

    在网页设计中,CSS(Cascading Style Sheets)起着至关重要的作用,它负责定义页面的布局和样式。然而,由于各个浏览器之间的实现差异,尤其是IE浏览器,开发者常常会遇到各种CSS兼容性问题。以下是一些针对IE浏览器...

    ie6十大兼容性问题

    如果页面在Firefox和IE6下都能正常工作,那么通常也能在其他现代浏览器中正常显示。 #### 十、重构代码 有时候,对HTML结构进行微调或简化CSS规则可以有效减少兼容性问题。虽然这意味着可能无法完全遵循最严格的...

    css3 支持ie8以下圆角

    在标题"css3 支持ie8以下圆角"和描述"DIVCSS5圆角实例,CSS3版本圆角实例,支持低版本IE6-IE9浏览器"中,我们关注的关键知识点是CSS3的圆角边框以及如何在早期的Internet Explorer浏览器(IE6到IE9)中实现兼容性。...

    css下拉菜单示例,兼容ie678,ff,chrome

    本示例主要关注的是使用CSS创建下拉菜单,并确保该菜单在不同的浏览器环境下,如IE6、IE7、IE8、Firefox和Chrome中都能正常工作。这是一项重要的任务,因为不同浏览器可能对CSS的解析和渲染存在差异,需要进行适当的...

    css - 时间轴效果

    在网页设计中,CSS(Cascading Style Sheets)是一种用于定义HTML或XML(包括SVG、XHTML等)文档中元素外观、布局和结构的语言。时间轴效果是CSS中一种常见且吸引人的设计手法,常用于展示历史事件、项目进度或者...

Global site tag (gtag.js) - Google Analytics