如何在 IE8 中去除 iframe 的边框

Posted 2023-03-06

【中文标题】如何在 IE8 中去除 iframe 的边框

【英文标题】：How to get rid of border for an Iframe in IE8

【发布时间】：2012-09-07 00:41:25

【问题描述】：

我正在创建一个内部带有 iframe 的对话框，问题是边框在 IE8 中一直显示，这在任何其他浏览器中都可以正常工作。

这是我试过的，我也试过border:none

$(d.dialog).find('#MyCoolDialogInner').html('<iframe src="/apex/EscalationForm?id=!Case.Id"   margin margin frameborder="0"/>'); 

提前致谢

【参考方案1】：

您是否尝试过通过 CSS 设置它？

iframe 
    border:0px none transparent !important;

此外，这些似乎也有效 - marginheight="0" marginwidth="0" frameborder="0"。取自this post on the same IE issue。

【参考方案2】：

试试这个：

<iframe frameborder="no" />

【参考方案3】：

添加 frameBorder 属性（注意大写的“B”）。

所以它看起来像：

<iframe frameBorder="0">Browser not compatible.</iframe>

【讨论】：

只是想知道：是否有 任何 浏览器版本中“B”的大小写很重要？ （我对此表示怀疑。）

在我的情况下，从 IE dom 资源管理器添加时，属性 frameBorder 无效（用于调试目的）。我不得不更改 html 文件本身并刷新浏览器内的页面。

【参考方案4】：

frameborder 可以是1 或0，不确定“no”是一个有效值。 Coda 在编码时提供有效的值选项，当我对 iframe 执行此操作时，只有 1 和 0 可用。

【参考方案5】：

我意识到 IE8 对 iFRAMES 来说是个麻烦事。 “Frameborder”在 HTML5 中已被弃用，因此虽然它是 IE8 最简单的选择，但这不是一个长期的解决方案。

通过将 iFRAME 放置在容器中，我成功地隐藏了边框和滚动条。 iFRAME 容器本身放置在一个 div 内，用于在网页上进行整体定位。 iFRAME 本身是绝对定位的，并且在顶部和左侧都应用了负边距，以隐藏顶部和左侧边框。绝对定位的 iFRAME 的宽度和高度应编码为 100% 以上，因此它超过了父大小，以至于右侧和底部边框不可见（滚动条也不可见）。此技术还使 iFrame 具有响应性，因为 iFRAME 容器使用百分比以及包含容器的 div。当然 iFRAME 父 div 必须设置为溢出：隐藏。

这是一个示例代码：

    /*THE PARENT DIV FOR THE iFRAME CONTAINER*/
    .calcontainer
        
        width:100%;  /*adjust iFrame shrinking here - if floating use percentage until no white space around image.*/   
        max-width:200px;     
        margin:auto;     
        


    /*THE RELATIVE POSITIONED CONTAINER FOR THE iFRAME*/

    .calinside  /*container for iFRAME - contents will size huge if the container is not contained and sized*/
           
        position:relative; /*causes this to be the parent for the absolute iFRAME*/
        padding-bottom: 100%; /* This is the aspect ratio width to height ratio*/
        height: 0;
        overflow:hidden; /*hides the parts of the iFRAME that overflow due to negative margins and over 100% sizing*/     
        


/*THE ABSOLUTE POSITIONED iFRAME contents WITH NEGATIVE MARGINS AND OVER 100% SIZE IS CODED HERE.  SEE THE NORMAL SETTINGS VERSUS THE IE8 SETTINGS AS MARKED.  A SEPARATE CSS FILE IS NEEDED FOR IE8 WITH A CONDITIONAL STATEMENT IN THE HEAD OF YOUR HTML DOCUMENT/WEB PAGE*/

    .calinside iframe
        
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;/*must expand to hide white space to the right and below.  Hidden overflow by parent above*/
        height: 103% !important; /*must expand to hide white space to the right and below.  Hidden overflow by parent above*/
        /*IE8*/top: -2%;
        /*IE8*/left: -2%;   
        /*IE8*/width: 114% !important;/*For IE8 hides right border and scroll bar area that is white*/  
        /*IE8*/height: 105% !important; /*hide white space and border below.  Hidden overflow by parent above*/          
        

【讨论】：

欢迎来到 Stack Overflow！最好预览您的帖子以确保格式正确。