iframe border详细测试

写个了小工具,对iframe border进行了详细测试,代码地址:http://web-developer-tips.appspot.com/iframe_border/index.html

 

IE 9、8、7、6 和 Firefox 截图:

iframe元素与iframe内部html都是200*110px时的效果:

 

iframe元素是180*90px,iframe内部html是200*110px,效果:

frameBorder写在css中无效(firefox、IE)。

内外等高等宽时:

IE 9、8、7、6需要frameBorder="0",不需要overflow:hidden,即可不出现滚动条;

Firefox需要frameBorder="0"或border:none,即可不出现滚动条。

 

宽高都不够时:

Firefox、gte IE8需要frameBorder="0"、iframe内部使用body{overflow:hidden},即可不出现滚动条;

lte IE7需要frameBorder="0"、iframe内部使用html,body{overflow:hidden},即可不出现滚动条。 

 

结论:

为了确保iframe不出现滚动条,兼容gte IE6、Firefox,需要使用frameBorder="0",iframe内部使用html,body{overflow:hidden}。

 

更多效果参看例子:http://web-developer-tips.appspot.com/iframe_border/index.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值