• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > iframe在IE6下出现横向滚动条的解决方案

iframe在IE6下出现横向滚动条的解决方案

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含iframe,IE6,横向滚动条等相关知识,佚名 希望在学习及工作中可以帮助到您
情况如下:(PS:红框表示iframe的区域,灰色的长方框表示上面提到的width:100%的元素,需要在IE6下看效果。)
当灰色的框的高度大于iframe的高度时出现纵横向滚动条(IE6下)。

当灰色的框的高度小于iframe的高度时效果正常。

解决方案一:给内页加上样式:html { overflow-y: scroll; }
当灰色的框的高度大于iframe的高度时仅出现纵向滚动条,效果正确。

当灰色的框的高度小于iframe的高度时纵向滚动条仍然显示(不可用状态),有瑕疵。

解决方案二:给内页加上样式:html { overflow-x: hidden; overflow-y: auto; }
当灰色的框的高度大于iframe的高度时仅出现纵向滚动条,但右边内容显示不完全(PS:里面文字内容是“这是个高为200px的div”),效果不正确。

当灰色的框的高度小于iframe的高度时没有滚动条出现,效果正确。


解决方案三:经过了多次尝试仍然没有发现纯css的完美解决方案,而我们追求的是最完美的效果。既然纯css解决不 了,我们只好搬出js来了,通过前面的测试我们发现灰色框高度小于iframe的高度时不需要做任何处理效果正确,而灰色框高度大于iframe的高度时 方案一是完美的。于是,我们的js有如下思路:当浏览器为IE6且内容高度比iframe高时给html标签加入方案一的样式。下面是jQuery的代 码:(不用jQuery的话思路一样。)

学会开心每一天(:

您可能想查找下面的文章:

  • 如何在网站中插入天气预报
  • 网页设计技巧:iframe自适应高度的问题
  • 为什么要少用Iframe的几个原因分析
  • 三谈Iframe自适应高度代码
  • iframe在IE6下出现横向滚动条的解决方案
  • 在iframe框架中打开页面的方法

相关文章

  • 2017-09-13sed简单教程
  • 2018-08-23PS基础教程!手把手教你制作剪纸字效
  • 2018-08-23新手想进阶技能?超酷炫的动感特效轻松get!
  • 2017-08-06CSS的部分常用属性整理
  • 2018-08-23如何成为一名优秀的体验设计师?来看这份总结!
  • 2018-08-23讲真,这可能是目前最全的在线配色工具合集了
  • 2017-08-06表单元素垂直居中完美解决方案
  • 2018-08-23这5个丑出新高度的网站,为什么那么多人夸
  • 2018-08-23用一篇文章,帮你看懂微软最新发布的「流畅设计体系」!
  • 2018-08-23谷歌所说的“整体网页设计”到底是什么概念?

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 这么实用的 9 个设计技巧,我不允许有人没看过!
    • 踩坑经验!那些你想太多的「过度设计」和改进方式
    • 实战案例!滴滴试驾商业B端App 项目设计经验总结
    • Airbnb 用这个流程,大幅提高了开发和设计的协作效率
    • 这10个不好用的微信设计,有哪些深层次的产品逻辑?
    • 红包还可以这样玩!众安专属红包活动设计经验总结
    • 用一个实战案例,帮你学会讲述重设计作品的思路
    • 分析近30年奥斯卡最佳影片海报后,得出了这样的设计套路
    • 高手的平面课堂!7个方法帮你从摄影照片中吸取设计灵感(附实战)
    • 屏幕外的交互设计:界面设计 ≠ 屏幕设计

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有