iframe中内嵌div的width为100%出现的不兼容现象
2014-05-10 00:33
232 查看
今天发现,一个内嵌在iframe中的div,当样式宽度设置为width=100%时,出现ff和ie不兼容的情况。
ff中这个div宽度超过iframe的宽度
而ie中这个div宽度不足iframe的宽度
经过百度,发现是因为不同浏览器中width=100%有不同的定义。
ff中width=100%是整个iframe的外部宽度,也就是iframe宽度为多少,div宽度也是多少,不考虑iframe的滚动条。
ie中width=100%是iframe的内部宽度,是iframe的宽度-滚动条的宽度(不管有没有出现滚动条)。一般来说,滚动条的宽度占了总宽度的2%,所以在这种情况下,div的实际宽度只有iframe的98%
此外,如果仅是这样,那么ff下的iframe不应该出现滚动条,而实际情况是div的宽度超过iframe,这又是另外一个原因导致的:offsetWidth。
offsetWidth = width + padding + border。
css样式中的width设置为100%,如果这时设置了padding或border的话,那么实际显示出来的宽度就超过父元素的宽度,所以在ff下就出现div的宽度超过iframe宽度的情况。
解决方法:设置iframe的scrolling='no' ;取消div的border和padding样式
ff中这个div宽度超过iframe的宽度
而ie中这个div宽度不足iframe的宽度
经过百度,发现是因为不同浏览器中width=100%有不同的定义。
ff中width=100%是整个iframe的外部宽度,也就是iframe宽度为多少,div宽度也是多少,不考虑iframe的滚动条。
ie中width=100%是iframe的内部宽度,是iframe的宽度-滚动条的宽度(不管有没有出现滚动条)。一般来说,滚动条的宽度占了总宽度的2%,所以在这种情况下,div的实际宽度只有iframe的98%
此外,如果仅是这样,那么ff下的iframe不应该出现滚动条,而实际情况是div的宽度超过iframe,这又是另外一个原因导致的:offsetWidth。
offsetWidth = width + padding + border。
css样式中的width设置为100%,如果这时设置了padding或border的话,那么实际显示出来的宽度就超过父元素的宽度,所以在ff下就出现div的宽度超过iframe宽度的情况。
解决方法:设置iframe的scrolling='no' ;取消div的border和padding样式
相关文章推荐
- body{width:100%}但窗口出现滚动条&body的子元素height:100%实际高度未填满整个页面
- vc打开出现不兼容现象怎么办
- [置顶] 【教程】完美解决windows10磁盘占用100%并出现卡顿、假死现象
- iframe 高度100%时,出现垂直滚动条
- 自适应高度div内嵌iframe高度被撑开问题解决
- css解决IE、Firefox兼容的div高度100%的问题
- 关于width:100% 缩小窗口时 背景图片出现空白bug
- iframe内嵌一个URL 在ios手机端显示左右被撑大 即使设为100% 可左右拉动
- 让iframe 100%填充页面代码|100% height|100% width
- width:100%缩小窗口时背景图片出现空白bug(转载)
- 在淘宝买的视频采集卡用VS打开时与电脑系统不兼容,出现蓝屏现象的解决方法
- div高度、宽度100%|div width、height 100% - div100%
- iframe设置height为100%,scrolling为no,还是出现垂直滚动条
- (转)iframe 高度100%时,出现垂直滚动条
- iframe高度设置100%了,并且设置了无滚动条属性,还是出现滚动条
- width:100%缩小窗口时背景图片出现空白bug
- 网页100%的背景放大后出现空白的问题(min-width)
- width:100%缩小窗口时背景图片出现空白bug
- iframe表单提交后,刷新页面,而并非刷新iframe出现“画中画”的现象
- div width 100% 左右滑动条问题