iframe 边框

一、iframe 的边框很难看，想去掉，使用CSS的border:none在IE（8）上没有，只能用iframe 自带属性frameBorder="0"来设置。

二、iframe与边框有关的几个参数：  
   （1）边框显示：

        语法：frameborder=0、1  
        说明：该属性规定是否显示浮动帧边框。  
                0：不显示浮动帧边框；  
                1：显示浮动帧边框。 （默认） 
         示例：<iframe   src="iframe.html"   frameborder=0>  
   （2）边框厚度：   
         语法：border=#  
         说明：该属性指定浮动帧边框的厚度，取值为正整数和0，单位为像素。为了将浮动帧与页面无缝结合，border一般等于0。  
          示例：<iframe   src="iframe.html"   border=1>  
   （3）边框颜色：  
         语法：bordercolor=color  
         说明：该属性指定浮动帧边框的颜色。color可以是RGB色（RRGGBB），也可以是颜色名。  
         示例：<iframe   src="iframe.html"   bordercolor=red>  
在IE8下面测试，border、bordercolor  根本不起作用。所以想调通过iframe 自带的属性调整iframe的边框是没有办法。

 

三、可以通过iframe 的frameborder属性与CSS相结合来给iframe加边框     例如：

<iframe id="checkListFrame" name="checkListFrame"    src="http://www.baidu.com"  frameBorder="0"  style=" border: #ff7c12 1px solid;" scrolling="no"></iframe>

 设置frameborder为0，然后设置css中的border属性，注意border属性一定要是1px solid red ，不能少了px, 也就是说如果值是的1 solid red 是无效的，有时候粗心会忘记。

 

总结：（1）其实IE解析iframe的属性是有点奇怪的，在CSS中设置border:none不起作用，必须设置frameborder为0，但是又支持border:1px solid red 这样的属性。

          （2）即使设置了border:1px solid red  也要把frameborder设为了0，如果不设为1，IE会加两层边框，一个frameborder的，一个CSS中border的。

评论

1 楼 JebySin 2012-11-23  

非常感谢，正好遇到这个问题，找了好多资料都不行，还好，最后找到了你的资料。