frame中隐藏横向滚动条

最新推荐文章于 2024-05-02 20:01:02 发布

转载最新推荐文章于 2024-05-02 20:01:02 发布 · 1.4k 阅读

本文探讨了解决网页中因内容溢出而产生的多余横向滚动条问题。作者尝试了多种方法，包括修改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>