iframe中内嵌div的width为100%出现的不兼容现象

今天发现,一个内嵌在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样式

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值