frame中隐藏横向滚动条

本文探讨了解决网页中因内容溢出而产生的多余横向滚动条问题。作者尝试了多种方法,包括修改body样式、移除DOCTYPE声明及使用iframe等,最终找到有效方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

遇到的问题是当main中的内容超过main的指定高度时,会同时出现竖向和横向滚动条,这是一种极不好的用户体验,理想状态应该是只出现竖向滚动条,我尝试了如下解决方法:
1.直接添加body属性<body style="overflow-x:hidden;">,结果是无效;
(分析原因:overflow-x是IE独有的 css 属性,加上DTD的话可能会被忽略,就像定制滚动条颜色的css属性一样)
2.去掉DOCTYPE声明<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">以后,横向滚动条被限制了,目的虽然达到,但是假设采用div+css布局的话,去掉文档声明会引发更多的问题,所以还需要尝试一些其它的方式;
3.在使用iframe的情况下,可以不删除DOCTYPE声明,设置scrolling="yes",<body style="overflow-x:hidden;">也能生效。
  
这是我做的代码片段:红色部分为控制隐藏滚动条的代码(横向的) 
<iframe name="content_frame" marginwidth=0 marginheight=0 width=100% height=340 src="taiqiusai.htm" frameborder=0 scrolling="yes",<body style="overflow-x:hidden;">></iframe>


<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值