`
aqingsao
  • 浏览: 174986 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

IE6 CSS bug: position:relative元素被overflow:auto/scroll元素包含

    博客分类:
  • css
CSS 
阅读更多

BUG描述:

页面中某DIV使用了position:relative,结合top=-25px等元素定位。在FF和IE7下表现正常,但是在IE6中该DIV会随鼠标滚动而滚动。

 

分析:

这是IE6一个已知的BUG:当某position:relative元素 被带有overflow:auto/scroll属性的块级元素包含时,会表现出postion:absolute的行为。

 

解决方法:

1.为包含块元素添加属性position:relative

2.把该元素的position:relative属性去掉,使用默认的static定位,并通过margin-top等属性实现类似的效果。

分享到:
评论

相关推荐

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

    问题在于,当父元素设置了`overflow:hidden`,而子元素设置了`position:relative`,在某些版本的IE浏览器(特别是IE6和IE7)中,`overflow:hidden`无法正确隐藏那些相对定位的子元素。这是由于这些旧版IE浏览器的...

    css 设置overflow:scroll 滚动条的样式

    css 设置overflow:scroll 滚动条的样式 /* 定义滚动条样式 */ ::-webkit-scrollbar { width: 6px; height: 6px; background-color: rgba(240, 240, 240, 1); } /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-...

    ie7中overflow:auto无效的解决方法

    产生原因当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时,父元素的overflow:auto属性就会失效。 解决办法解决这个bug很简单,在父元素中使用position:relative;即可解决该bug。 代码bug重现 ...

    HTML IE6 纯CSS 解决 position fixed 的问题

    在`ie6.css`中,我们可以使用其他方法替代`position: fixed;`,如`position: absolute;`配合JavaScript进行动态调整。 2. **使用expression()表达式**: IE6支持CSS表达式,可以通过它来计算元素的位置。例如,...

    详解overflow-scrolling解决滚动卡顿问题

    如果你对某个div或模块使用了overflow: scroll属性,在iOS系统的手机上浏览时,则会出现明显的卡顿现象。但是在android系统的手机上则不会出现该问题。 解决方法 以下代码可解决这种卡顿的问题:-webkit-overflow-...

    解决页面使用overflow: scroll在iOS上滑动卡顿的问题1

    标题中的“解决页面使用overflow: scroll在iOS上滑动卡顿的问题1”指的是在iOS设备上,当HTML元素使用CSS属性`overflow: scroll`时,滚动可能会变得卡顿不顺畅。这个问题通常不会在Android设备上出现,使得开发者...

    解决IE6,IE7不能隐藏(overflow:hidden)绝对定位溢出的内容

    令人蛋疼的IE,IE6/IE7下父元素有相对/绝对定位时,子元素在IE6和IE7下overflow:hidden;失效。 情况一:(在parent上增加position:relative) 复制代码代码如下: <style type=”text/css”> .parent{ width:...

    CSS中overflow:scroll怎么设置只上下滚动而不左右滚动

    在CSS中,`overflow`属性用于控制元素内部内容溢出其边框的行为。当内容宽度或高度超过元素的设定尺寸时,`overflow`属性决定了如何显示溢出的内容。`overflow: scroll`是一个常见的值,它指示浏览器在内容超出元素...

    IE8 css overflow:hidden不起作用

    1. 如果目的是防止内容溢出,可以考虑使用`overflow:auto`,在旧版IE中这通常会表现为显示滚动条,尽管这可能不是最理想的视觉效果。 2. 对于块级元素,可以通过添加`overflow:scroll`来实现滚动条的显示,从而允许...

    css兼容IE6、IE7、FF的技巧

    - **IE6的定位问题**:IE6对于`position: absolute`或`position: relative`的元素位置计算有误。 - **解决方法**: - 直接设置`.line-height`等于当前div的高度,并通过`vertical-align: middle`来居中显示。 - ...

    全面阐述overflowhidden属性

    4. **制作滑动效果**:在移动端应用或网站中,为了实现平滑的滑动效果,可以将父元素的 `overflow` 设置为 `hidden`,而子元素设置为 `scroll` 或 `auto`,从而实现滑动浏览内容的效果。 #### 三、`overflow: ...

    一个VUE组件子元素scroll父元素容器不跟随滚动兼容PC移动端

    例如,设置`overflow: hidden`防止父元素内容溢出,以及设置`position: relative`或`absolute`来控制父元素的位置。 5. **使用库或插件**: 虽然可以手动实现这个功能,但为了提高效率和兼容性,也可以使用一些...

    Sticky Scroll特效.rar

    当元素的位置被设置为`sticky`时,它会在用户滚动页面到达特定阈值时,从`relative`变为`fixed`,从而实现固定在屏幕上的效果。 HTML结构是实现此效果的基础。例如,我们可能有一个包含图片的容器,如下所示: ```...

    DIV+CSS的布局元素.pdf

    本文将详细介绍其中的关键布局元素,包括position、float、display、clear和overflow等属性,以及CSS的基础知识和定位机制。 一、CSS基础知识:定位position和浮动float 1. 定位position:position属性允许我们...

    css使用overflow属性控制滚动条的样式

    滚动条样式主要涉及到如下overflow属性: overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容,其用到的表现形式和值有以下几种 overflow: auto; 在需要时内容会自动添加滚动条 overflow: ...

    CSS在网页上实现浮动层跟随滚动条特效(兼容IE6)

    CSS 实现浮动层跟随滚动条特效(兼容IE6) 在网页上实现浮动层跟随滚动条特效是非常常见的要求,特别是在网站广告展示时。实现这种特效有多种方法,本节将介绍两种比较成功的实现方法,它们都能完美兼容各大浏览器...

    IE 9渲染overflow-x的bug及解决

    标题中的“IE 9渲染overflow-x的bug及解决”指的是在Internet Explorer 9浏览器中,当使用CSS属性`overflow-x`来控制元素水平方向上的溢出显示时,可能会遇到一些未预期的问题。`overflow-x`属性是用于指定当内容...

    详解css粘性定位position:sticky问题采坑

    CSS中的`position: sticky`是一种混合定位方式,它结合了`relative`和`fixed`的特点。在页面滚动过程中,当元素距离其父元素达到设定阈值(如`top: 100px`)时,`position: sticky`会使元素变为固定定位,保持在屏幕...

    react-auto-scroll:自动将元素滚动到底部

    @ brianmcallister /React自动滚动 自动将元素滚动到底部react-auto-scroll是一个React组件,它将包含元素自动滚动到底部。目录演示版托管的演示: : 您也可以在本地运行演示。 开始: git clone git@github....

    css:字体属性参考大全

    ### CSS:字体属性参考大全 #### 一、字体属性(Font) 字体属性是CSS中用于控制文本外观的重要组成部分。下面详细介绍各个子属性的功能及其使用方法。 ##### 1. 大小(Font Size) - **语法**:`font-size: size...

Global site tag (gtag.js) - Google Analytics