今天发现，一个内嵌在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样式
604
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
