javascript 如何在 IE8 中去掉 iframe 的边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12414525/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get rid of border for an Iframe in IE8
提问by PepeFloyd
I am creating a dialog with an iframe inside, the problem is that the border keeps showing in IE8, this works perfectly in any other browser.
我正在创建一个带有 iframe 的对话框，问题是边框在 IE8 中一直显示，这在任何其他浏览器中都可以完美运行。
This is what I have tried, I also tried border:none
这是我尝试过的，我也尝试过 border:none
$(d.dialog).find('#MyCoolDialogInner').html('<iframe src="/apex/EscalationForm?id={!Case.Id}" height="495" width="380" marginheight="0" marginwidth="0" frameborder="0"/>');
Thanks in advance
提前致谢
回答by Anoop
Add the frameBorder attribute (note the capital ‘B').
添加 frameBorder 属性（注意大写的“B”）。
So it would look like:
所以它看起来像：
<iframe frameBorder="0">Browser not compatible.</iframe>
回答by Robin Maben
Have you tried setting it via CSS?
您是否尝试过通过 CSS 设置它？
iframe {
border:0px none transparent !important;
}
Also, these seem to work too - marginheight="0" marginwidth="0" frameborder="0". Taken from this post on the same IE issue.
此外，这些似乎也有效 - marginheight="0" marginwidth="0" frameborder="0"。取自这篇关于同一 IE 问题的帖子。
回答by Steven Hunt
Try this:
试试这个：
<iframe frameborder="no" />
回答by Frugal
I realize IE8 is a nuisance when it comes to iFRAMES. "Frameborder" is deprecated in HTML5 so while it's the easiest option for IE8, this is not a long term solution.
我意识到 IE8 在 iFRAMES 方面很麻烦。“Frameborder”在 HTML5 中已被弃用，因此虽然它是 IE8 的最简单选项，但这不是一个长期解决方案。
I have successfully hidden borders and scrollbars by placing the iFRAME inside of a container. The iFRAME container itself is placed inside of a div for overall positioning on the web page. The iFRAME itself is absolute positioned and negative margins applied to both top and left in order to hide the top and left borders. Width and height of the absolutely positioned iFRAME should be coded at over 100% so it exceeds the parent size to the point that the right and bottom borders are not visible (also the scrollbars are not visible). This technique also makes the iFrame responsive because the iFRAME container uses percentages as well as the div that holds the container. Of course the iFRAME parent div must be set to overflow:hidden.
通过将 iFRAME 放置在容器内，我成功地隐藏了边框和滚动条。iFRAME 容器本身放置在一个 div 内，用于在网页上进行整体定位。iFRAME 本身是绝对定位的，并且将负边距应用于顶部和左侧以隐藏顶部和左侧边框。绝对定位的 iFRAME 的宽度和高度应编码为 100% 以上，以便它超过父级大小，以至于右侧和底部边框不可见（滚动条也不可见）。这种技术还使 iFrame 具有响应性，因为 iFRAME 容器使用百分比以及保存容器的 div。当然 iFRAME 父 div 必须设置为 overflow:hidden。
Here is an example code:
这是一个示例代码：
/*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*/
}
