IE6、7中滚动条失效

最新推荐文章于 2022-08-29 16:24:16 发布
最新推荐文章于 2022-08-29 16:24:16 发布
阅读量831 收藏
点赞数
分类专栏： 浏览器兼容
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010200222/article/details/45622659
版权

1.问题代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>鬼眼邪神的博客</title>
		<meta name="author" content="鬼眼邪神"/>
		<style>
			div {
				width:300px;
				height:100px;
				border:1px solid #000;
				overflow:auto;
			}
			p {
				position:relative;
			}
		</style>
	</head>

	<body>
		<div>
			<p>鬼眼邪神的博客。如果你每天比别人慢半步，一年后就是182.5步，十年后就是十万八千里！</p>
			<p>鬼眼邪神的博客。如果你每天比别人慢半步，一年后就是182.5步，十年后就是十万八千里！</p>
		</div>
	</body>
</html>
在IE6、7中的效果：
IE6、7中滚动条失效 - 鬼眼邪神 - 鬼眼邪神

2.问题分析

在IE6、7中，当子元素相对定位时父元素overflow属性的auto|hidden就会失效。

3.解决方法

（1）给父元素设置相对定位position:relative。
（2）去除子元素的相对定位属性。
鬼眼邪神
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ie7中overflow:auto无效的解决方法
09-24
然而，在IE7中，如果父元素的直接子元素或其下级子元素设置了`position:relative`，`overflow:auto`可能就会失效。这是因为IE7的布局引擎在处理相对定位的子元素时，会改变其与父元素的关系，从而影响到父元素的滚动...
div模拟滚动条当div宽度小于18时滚动条不滚动
12-03
然而，在宽度小于18像素的`div`中，滚动条在IE10的兼容模式下失效。这是由于IE浏览器的一个已知问题，它对模拟滚动条的最小宽度有一定的限制。在某些版本的IE中，滚动条需要至少17像素的宽度才能正常工作。在示例中...
IE6兼容性滚动条问题
ma_shuqiang的专栏
03-18 338
图a IE6以上                                            图b IE6 问题描述：页面在IE6以上显示的没有问题，本来那个水平的滚动条在按钮上面，iE6显示的时候滚动条在按钮下面。       问题解决：设置表格那个div的样式。如下  代码：.scrollDiv{ width:722px; overflow:auto; }
解决ie9下滚动条失效的BUG
weixin_30852419的博客
06-14 636
问题:ie9下overflow:auto;自动出现滚动条设置失效解决办法：设置元素布局方式position: absolute； 转载于:https://www.cnblogs.com/yangxiong/p/7010944.html
IE6下出现横向滚动条问题的解决方案
weixin_30834019的博客
04-05 154
当我们在css样式设置为html {overflow-y:auto;}时，在ie7以上版本应用时不会有问题，可是在ie6下就会发现垂直滚动条出现会引起横向滚动条出现。究其原因是在ie6下，当内容过多出现垂直滚动条时，此时页面的宽度为其本来宽度加上滚动条的宽度，导致页面宽度超过100%，而出现横向滚动条，在ie7+浏览器中，会自动的识别滚动条，页面宽度为内容的宽度加上滚动条的宽度等于10...
ie6frame
l719247588的博客
12-22 84
$(function(){ if($.browser.msie&&$.browser.version=="6.0"&&$("html")[0].scrollHeight>$("html").height()) $("html").css("overflowY","scroll");});
IE6双滚动条处理
Zhongxiucheng的专栏
11-09 1298
如果想要解决这个问题, 你需要选择一个最适合自己的解决方案. 方案 1: 在CSS定义中粘贴下面的代码: html { overflow-y: scroll; } 这会强制默认出现垂直滚动条, 这样一来, 从某些理由上来讲, 便消去了IE对水平滚动条的需求. 优点:完全解决了这个问题, 允许你保持完整的XHTML doctype. 缺点:即使不需要垂直滚
IE6特有bug兼容性问题整理
11-24
在IE6中，当`html`标签具有`background`属性时，`body`标签的`background:fixed`属性会失效，导致背景图片随滚动条移动。 - **解决方案**： 解决这一问题的方法是将`fixed`属性应用到`html`标签上，如下所示： `...
HTML IE6 纯CSS 解决 position fixed 的问题
06-10
`是一个非常有用的CSS属性，它可以使元素相对于浏览器窗口保持固定位置，无论滚动条如何滚动，该元素都会停留在屏幕的特定位置。然而，在Internet Explorer 6 (IE6)这个古老的浏览器中，`position: fixed;`并不完全...
IE8 css overflow:hidden不起作用
09-25
1. 如果目的是防止内容溢出，可以考虑使用`overflow:auto`，在旧版IE中这通常会表现为显示滚动条，尽管这可能不是最理想的视觉效果。 2. 对于块级元素，可以通过添加`overflow:scroll`来实现滚动条的显示，从而允许...
解决 前端 设置滚动条的宽度后 滚动条消失的问题（解决ie浏览器样式无效的问题）
weixin_53588804的博客
08-29 1352
.op::-webkit-scrollbar-thumb {/*滚动条里面小方块*/ border-radius:5px; -webkit-box-shadow: inset005pxrgba(0,0,0,0.2); background:rgba(0,0,0,0.2); } .op::-webkit-scrollbar-track {/*滚动条里面轨道*/ -webkit-box-shadow: inset005pxrgba(0,0,0,0.2); border-radius:0;
ie6 滚动条无限下拉（鄙视IE6）
么么酱的博客
11-11 481
昨天在做页面,测试到ie6的时候，遇到滚动条无限下拉的bug,ie6就是这么麻烦，后来找了一些资料来看，自己尝试了一些方法，终于找到解决方法。 一般ie6会出现这种问题，都是你设置了某个东西的position:abselute,在ie6下，遇到这种绝对位置的，他会一直往父元素找一个position:relative,来固定自己的位置，如果找不到，就会出现滚动条无限下拉的情况。 此时可是
IE6的overflowauto的不显示滚动条问题
Quentinlee的专栏
10-19 3150
<br />没有用高亮插件的人几乎都用<pre>来显示源代码，为了不让代码撑破布局，都用了overflow:auto，当超过宽度时产生水平滚动条。在FF下一切显示正常，可在ie6下会跟着产生一个垂直滚动条，行数如果少，代码被框在一个很窄的框里，看起来很不方便，用overflow-x:auto可以只显示水平滚动条，但在ie6和ie7下，不管行数多少，最后一行总是这样：<br />如图所示最后一行总是被遮盖。这里提供了一个好办法，来解决这个问题，修改模板css的pre，代码如下：<br />pre {<br /
【JavaScript】兼容IE6的滚动监听
编程记录，亲测有效
10-22 1371
本文是《【jQuery】兼容IE6的滚动监听》（点击打开链接）的进一步改进，这次无须引入jQuery纯粹使用JavaScript来实现，精简了语法。同时，不会在JavaScript处写过多的代码，导致难以维护。具体效果如下，此乃IE6的效果： 这里运用了锚点跳转，同时，随着滚动条的滚动右方目录的超级链接会变色。 这个目录左方的点的实心还会进一步变化。 具体思想如下，主要是判断此时浏览
IE6,7局部滚动条中元素position:relative或绝对定位滚动无效BUG
99guo的专栏
11-27 1208
问题现象描述：IE6,IE7下元素使用position:relative无法跟随父级一直滚动  position:relative; 父级 overflow:scroll时， IE6子级不随滚动条滚动，IE7也没有修改这个BUG 解决方案：父级元素添加 “position:relative;left:0;top:0;”
IE6,7默认显示垂直滚动条
走自己的路让别人来看
01-11 3593
IE6,7默认显示垂直滚动条 IE6,7默认显示垂直滚动条,IE8不显示垂直滚动条 无标题文档 body{ margin:0px;} *{ margin:0px; padding:0px;} #center{ margin:0px auto; width:400px; height:200px; line-height:200px; ba
ie滚动条重叠兼容
hua_ban_yu的博客
12-28 773
ie浏览器高版本出现两个滚动调重合，外部的滚动条覆盖里面的滚动条导致内部滚动条无效。 如图： 原因  @-ms-viewport {width: device-width;} 解决方案 ： 外部滚动条样式添加  ： -ms-overflow-style: scrollbar; 例如：body {     -ms-overflow-style:scrollbar
chrome与ie浏览器滚动条样式修改（firefox不支持css修改滚动条样式）
panzhao007的博客
09-10 2501
1.chrome滚动条样式修改 #userNavId::-webkit-scrollbar { width:10px; height:10px; } #userNavId::-webkit-scrollbar-button { /*background-color:#FF7677;*/ } #userNavId::-webkit-sc...
echarts滚动条固定失效
最新发布
06-20
ECharts 是一款非常流行的 JavaScript 数据可视化库，它在图表展示上功能强大。关于滚动条固定失效的问题，可能出现在以下几个方面： 1. **样式冲突**：如果你在自定义图表容器样式时，不小心设置了滚动条的样式为透明或者重叠，可能会导致滚动条看起来像是没有显示，但实际上是可以滚动的。检查一下 `overflow` 属性和 `scrollbar` 相关的 CSS 规则。 2. **滚动区域设置不当**：在配置图表时，确保设置了正确的 scrollable 区域，比如 `option.grid` 或 `option.dataZoom` 中的 `scrollable` 设置。如果漏掉了或设置错误，滚动条可能不会生效。 3. **使用了滚动监听覆盖**：某些情况下，使用了第三方库或者自定义的滚动事件处理可能导致 ECharts 的滚动条失效。检查是否有其他代码干预了滚动事件。 4. **版本兼容性**：如果使用的 ECharts 版本与其他库存在冲突，或者不支持某些滚动条相关的特性，可能需要升级到最新版或者降级回兼容的版本。 5. **滚动条组件冲突**：在某些复杂布局中，如果图表嵌套在其他滚动容器（如 Bootstrap 的 Scrollspy）内，可能会影响到 ECharts 的滚动条行为。检查布局结构并优化滚动管理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值