浏览器
双核浏览器
游戏浏览器
高速浏览器
视频浏览器
IE浏览器
浏览器周边
手机浏览器
安卓游戏
音乐舞蹈
养成游戏
儿童游戏
仙侠手游
角色扮演
策略塔防
休闲益智
动作冒险
飞行射击
模拟经营
体育运动
赛车竞速
网络游戏
安卓软件
资讯阅读
生活服务
影音播放
购物理财
效率办公
趣味娱乐
交通出行
学习教育
摄影图像
在线音乐
系统工具
网络购物
聊天工具
安全杀毒
图片编辑
新闻资讯
软件资讯
游戏资讯
手机教程
手游攻略
游戏攻略
软件教程
IE专区
安卓专题
文章合集
电脑软件专题
安全软件
杀毒软件
系统安全
加密解密
防火墙
远程控制
木马查杀
影音软件
网络电视
视频播放
音乐播放
视频制作
音频编辑
录音录像
教育学习
外语学习
教育管理
早教启蒙
在线课堂
成人教育
资格考试
聊天社交
即时通讯
视频聊天
在线交友
变声器
表情包
办公软件
线上会议
文档管理
行业管理
考勤打卡
应用工具
输入法
下载工具
时钟日历
记事本
文件管理
计算器
编程开发
编程工具
JAVA相关
加壳脱壳
编程控件
数据库
网页源码
软件开发
补丁制作
系统美化
桌面制作
壁纸大全
系统主题
屏幕保护
桌面辅助
系统软件
系统优化
备份还原
系统检测
U盘工具
磁盘工具
驱动补丁
图文处理
图片素材
图像处理
图片制作
图片压缩
电子相册
抓图工具
其他软件
电子书籍
模拟器
辅助工具
交通出行
手机管理
其他工具
素材下载
字体素材
PPT素材
专区
文章合集
软件
游戏
浏览器
安卓专题
软件
游戏
浏览器
IEfans/ IE专区/ IE动态 /高手解决IE中盒子模型滚动条有妙招

高手解决IE中盒子模型滚动条有妙招

2023-08-03 01:30:01 编辑:匿名

其实不要看我们平时使用IE浏览器都是简简单单的,打开浏览器,输入所需网址,就完事了。可是当面对,稍微比较深奥的问题时,大家就搔头抓耳了。就比如关于浏览器盒子模型的滚动条的问题。下面,小编就此问题进行详细的讲述。

  先看图:

浏览器盒子模型的滚动条
浏览器盒子模型的滚动条

  那么我们来看容器高度:

  假如内容固定,表格也固定,那么你可能设置成固定高度,但是假如表格下还有内容,还正好取出来的数据不够表格的最大行数据(比如每页10行,结果一共才4行),那么会出现一大块空白,所以可能更多的情况下你还是设置的是动态高度,其实就是100%啦。

  既然是100%,那么为什么出现了竖滚条呢?首先,只有在IE下才出现这个滚动条,那么显然,肯定又是盒子模型对高宽的理解不同了。

  假如真实内容高度现在是500Px,因为横滚条(假定有12px)的出现,W3C可能认为高度就是512px了,那么事情就解决了,容器是512,内容是512。

  可是IE显然不这么计算,你现在内容高度是500px,那么我的100%算出来的就是500px,现在出现了横滚条怎么办?

  1,它必须在容器里出现(本例中就是外围的DIV);

  2,只要一出现,必须会把实际内容追加成512px;

  这样就出现了上面的结果,计算的高度和实际高度不符,于是滚动条就出现了。这时候来解决问题:

  开始认为,既然这是不应该出现的滚动条,那么就让它不显示不结了?于是给容器加style:overflow-y:hidden;

  结果一运行,不对,512px的内容被你强制改成了500px还不让滚动,必然有12px的内容无法显示,因为滚动条的级别比较高,所以不能显示的其实就是内容区的最后那12px,显然不能这么做

  最后没办法,只有先判断它是否IE,(IE8引擎已经有所改变,那就判断IE7吧),然后再插入一行(具体几行根据浏览器实际情况定,上述数字都是假的,为了描述方便),在这个时候,再让滚动条不出现,这样问题就解决了,

  在这种情况下,IE7事实上确实有部分内容无法显示,但无法显示的是你插入的无意义的空行。

  插入的代码你应该明白,是这种:

  《![if IE 7]》

  《p》 《/p》

  《![endif]》

  看效果:


浏览器盒子模型的滚动条

  好了,相信很多的朋友是看不懂的。只要是涉及到代码的问题,很多人就开始头晕了。大家不用担心,这种事情,还是让iE高手来解决。要是真的有兴趣,就认真学习一下吧!

相关推荐

浏览器更新