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

最新推荐文章于 2023-05-16 09:56:35 发布
原创 最新推荐文章于 2023-05-16 09:56:35 发布 · 198 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#CSS

本文详细介绍了在IE6浏览器中，当position:relative元素被带有overflow属性的块级元素包含时，会出现类似position:absolute的错误行为。提供了解决方案：为包含块元素添加position:relative属性或通过margin-top等属性调整布局。

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 Grid布局中固定位置元素的处理方法
weixin_41455464的博客
06-29 323
处理 Grid 布局中的固定位置元素，就像驯服一群调皮的小动物。你需要了解它们的习性，并选择最适合你的“驯服”方法。
css Position(定位) [第八天]
全网同名：PBitW！ 可以去掘金关注我！
08-22 424
position 文档流 1、background-position 2、float 3、边距问题 什么是脱离文档流 ？ static（静态定位） fixed 固定定位（相对浏览器窗口是固定位置） 特殊情况不相对于视口 relative 相对定位（相对其正常位置） 注意 absolute 绝对定位 sticky 粘性定位 使用条件 问题 margin 会影响 只能作用于最外围外的父元素 或者 子元素的父元素是定位元素 如果子元素的父元素是定位元素 重叠的元素（z-index）
解决IE6,IE7下子元素不随着父元素滚动条滚动而滚动的问题
Michael Ran
12-11 829
解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后，子元素不随着滚动条滚动的问题 在IE6,IE7下，子元素使用position:relative、父元素使用overflow:auto后，我们预期的是滚动条滚动时，子元素也随着滚动，实际情况是内容不滚动，就感觉你是定位定在那里了。 解决办法是父元素添加position:relat
overflow与position:relative(absolut)冲突解决
weixin_59017683的博客
05-16 877
需求：项目中遇到展示一个列表鼠标移动上去在列表右侧展示对应行的相关信息，正常情况会直接对列表进行循环，并对列表进行overflow:auto;然后在列表中行中加左侧数据和右侧数据，对行进行相对定位，对右侧数据绝对定位。问题：overflow 生成了一个bfc，其层叠顺序的权重较高，position的absolute的权重不如它高。解决：对列表Overflow,然后当鼠标移动到对应行写右侧数据show的时候，用jQuery获取到行的所在位置，然后用jQuery对右侧数据设置样式。
关于CSS中position属性和overflow属性的使用小结
学无止步的博客
08-18 3485
关于CSS中position属性和overflow属性的使用小结 position属性 用于设置某个元素的位置类型。取值类型可以有：static、relative、absolute、fixed、inherit和sticky，这里sticky是CSS3新发布的一个属性。 1、position: static static(没有定位)是position的默认值，元素处于正常的文档流中，会忽略left、top、right、bottom和z-index属性。 2、position: relative relativ
div 固定不动 另一个div 有滚动条，position: relative的用法
weixin_41315600的博客
06-23 1688
div 固定不动在顶端， 另一个div 的内容可以滚动显示，position: relative的用法
overflow:auto 的情况下，position:relative 的兼容性的问题
weixin_37586145的博客
04-09 717
overflow:auto 的情况下，position:relative 的兼容性的问题     虽然，理论是可以一套又一套。但是，到了实战中，总会有些莫名其妙的问题，占用了你大量的时间。像Jquery 这样的框架，可以兼容各种各样的浏览器， 可以非常完美的，简洁的进行编程。但是CSS 的设计没有这样简单，没有通用的解决方案。只能靠平时的点滴积累...
overflow:scroll 移动端失效
07-20
overflow:scroll 是一个CSS属性，用来设置一个元素在内容超出其容器尺寸时是否显示滚动条。在移动端中，overflow:scroll 有时可能失效的原因有以下几个： 1. 使用的元素不支持滚动：有些元素，比如 `<div>` 或 `...
js解决overflow：scroll失效问题
热门推荐
weixin_34128534的博客
07-03 1万+
用JS有效解决移动w用JS有效解决移动web浏览器中HTML元素的overflow:sceb浏览器中HTML元素的overflow:scroll滚动属性失效问题iscroll4webhtml5mobilejavascriptweb移动平台前端UI开发工作，兼容问题超多，今儿又遇到一个。产品方要求在某固定尺寸容器内显示内容，但内容条数未知；如果条数过多，容器显示滚动条。这鸟需求...
scroll滚动视图里面position: absolute left：50% margin：负自身宽度一半内容不显示
最新发布
03-11
- 若父容器 `overflow` 设置为 `hidden`，负边距可能导致元素被裁剪。 3. **元素宽度计算问题** - `margin-left:-width/2` 需明确元素的实际宽度，动态内容未显式设置宽度时会导致计算错误。 --- ### **️ ...
CSS学习，常用常记（定位Position，Overflow，浮动Float）
Sinhaeng_Hhjian
03-20 548
position 属性指定了元素的定位类型； 元素可以使用的顶部，底部，左侧和右侧属性定位； 然而，这些属性无法工作，除非是先设定position属性； 他们也有不同的工作方式，这取决于定位方法； static 定位 HTML 元素的默认值，即没有定位，遵循正常的文档流对象。 静态定位的元素不会受到 top, bottom, left, right影响。 div.static { ...
css中position:relative和overflow:hidden的问题
weixin_30514745的博客
05-05 370
今天在做网页的时候发现一个问题，在父标签中使用了overflow:hidden;时，如果子标签中有元素的position设置成relative的时候，在IE6和IE7中父元素的overflow对其将不起作用，在IE8、FF，Chrome中均正常显示如下代码： <div style="height:100px; width:100px; background:#CCC; o...
解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后，子元素不随着滚动条滚动的问题
happyqyt的专栏
05-07 8335
在IE6,IE7下，子元素使用position:relative、父元素使用overflow:auto后，我们预期的是滚动条滚动时，子元素也随着滚动，实际情况是内容不滚动，就感觉你是定位定在那里了。 解决办法是父元素添加position:relative样式。
内层元素设置position:relative后父元素overflow:hidden overflow:scroll失效 解决方法
weixin_34062329的博客
11-04 563
内层元素设置position:relative后父元素overflow:hidden overflow:scroll 都失效 解决方法：在position:relative的外层父容器加position:relative就可以搞定
overflow裁剪绝对定位（position: absolute）的后代元素的问题
lzc的博客
08-02 3643
先上图： 标题 如图所示，我想实现上边导航栏，左边菜单栏，右边内容区的布局，每个菜单项有个badge。左边的导航栏设置overflow-y: scroll，overflow-x: hidden。可见badge被部分裁剪了。请问各位大佬有什么好的办法解决这个问题吗。代码如下： &lt;template&gt; &lt;div id="indexApp"&gt; &lt;div ...
关于css position和scroll事件的一些理解
weixin_30236595的博客
07-18 269
　　昨天在做拾色器开发的时候，由于要将失色器定位到一个弹出框中。所以我使用了position:absolute属性。获取点击元素的位置。我获取它的位置的方法是使用$(this).offset().left，$(this).offset().top。因为absoulte是相对页面进行定位的。所以我在弹出框内的滚动条滚动的时候它不会跟着滚动。当时我想到的解决办法就是使用一个方法来获取scroll是向上...
移动端常见问题解决方案（position:fixed失效、overflow:auto导致滚动不流畅、input获得焦点软键盘弹出时position:fixed的footer遮挡内容区域等）
Flowering_Vivian的博客
09-23 2619
移动端弹层水平垂直居中方法 .layer{ position: fixed; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transfor
固定顶部导航栏和左侧边栏滚动条为右下方的一类布局分析
Oshyn —— 乐而学，学而乐
08-16 1万+
在管理界面或者一些需要固定显示信息的界面，经常遇到这样的布局：顶部导航栏固定不动，左侧有一个侧边栏用来显示详细信息，右下侧为主要内容所在区域。如下图所示： 这是需要达到的目标效果。其中Header和SideNav部分之间用固定定位实现就可以了，但是MainContent部分右侧的scroll bar确实不太好处理，主要存在两个问题： - 按照普通的方式基本都会铺满右侧整个可视区域，这使得顶部
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值