`
aqingsao
  • 浏览: 173413 次
  • 性别: 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 设置overflow:scroll 滚动条的样式

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

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

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

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

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

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

    故事背景:最近的一次开发中,使用到了overflow:scroll属性来滑信心满满的以为不会出现任何问题,看来还是太清高自傲了,于是写下这篇随笔特此总结一番。机

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

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

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

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

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

    前言:position:sticky是css定位新增属性;可以说是相对定位relative和固定定位fixed的结合;它主要用在对scroll事件的监听上;简单来说,在滑动过程中,某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如...

    移动webview 支持overflow:auto

    移动版游戏器不支持overflow:auto,即多余内容隐藏,并能通过手指拉动来滚动内容。目前有很多模拟这种效果的js库,如iScroll。但经项目测试,iscroll在很多浏览器中有明显的性能问题。一怒之下写了这个库,性能刚刚...

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

    CSS中"overflow:scroll"默认是左右,上下都滚动。怎么设置只上下滚动而不左右滚动,下面有个不错的解决方法,感兴趣的朋友可以参考下

    微信小程序实现列表的横向滑动方式

    overflow-x: auto;子元素设置: display:inline-block; 方式二:scroll-view 标签 + 样式 scroll-view的横向滚动: scroll-view的内层view元素需要:display:inline-block; scroll-view的外层元素需要:white-...

    scrollbar_js实现竖向滚动条

    .box-163css{position:relative;height:330px;border:solid 1px #ddd;width:600px;margin:20px auto;} .picul{ width:100%; float:left;} .picul li{ width:115px; height:115px; float:left; margin:0 7px 25px 7px...

    使用Element的InfiniteScroll 无限滚动组件报错的解决

    一、问题描述 在使用Element的InfiniteScroll 无限滚动时候出现以下错误: ...给需要使用 InfiniteScroll 的元素或者它的父级元素加上 overflow:auto; 属性即可。 <div v-infinite-scroll=l

    CSS3自定义滚动条样式的示例代码

    滚动条是个很常见的东东,不过某些浏览器自带的滚动条确实不太好看啊,下面可以作为学习,探讨下自定义滚动条的实现,这样你的滚动条就可以...overflow:scroll //内容会被修剪,浏览器会显示滚动条以便查看其余内容 ove

    css入门笔记

    取值:auto 则内容居中 2、外边距margin 6、背景颜色 1.背景色 属性:background: 取值:颜色 2.背景图片 属性:background-image:url(); 取值:url() 3.背景图像平铺 属性:background-repeat 取值:...

    harmonyos2-33-js-conceptos::scroll:每个JavaScript开发人员都应该知道的33个概念

    和声2 每个 JavaScript 开发人员都应该知道的 33 个概念 介绍 创建此存储库的目的是帮助开发人员掌握他们在 JavaScript 中的概念。...这不是一项要求,而是未来学习的指南。...它基于作者撰写的文章,您可以阅读它...:scroll:

    谷歌浏览器平滑滚动扩展smoothscroll.zip

    谷歌浏览器平滑滚动扩展 ... 特性 - Picasa-like smooth scrolling- Mouse wheel, middle mouse and keyboard support- Arrow keys, PgUp/PgDown, Spacebar, Home/End- Customizable step sizes, frames per second ...

    postcss-momentum-scrolling:PostCSS插件添加“动量”样式的滚动行为(-webkit-overflow-scrolling

    插件,用于为iOS上具有溢出(滚动,自动)的元素添加动量样式滚动行为( -webkit-overflow-scrolling:touch )。 例子 /* Input example */ . minicart { overflow : scroll; } /* Output example */ . minicart ...

    CSS中的 position属性sticky详解

    在开发移动端app时,经常会碰到需要这样一种情况 —— 网站滚动到一定高度的时候,让一部分内容作为navbar,也就是置顶显示,我们一般会使用js监听scroll事件来实现,但是新增的css属性position:sticky可以简单实现 ...

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

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

Global site tag (gtag.js) - Google Analytics