Internet Explorer 和 iFrame 中图像周围的边框答案

【问题标题】：Internet Explorer and Border around Image IN iFrameInternet Explorer 和 iFrame 中图像周围的边框
【发布时间】：2012-07-10 05:15:50
【问题描述】：

所以我正在尝试解决我正在开发的网站的一些 css 问题，除了 1 个 iFrame 元素外，其他一切看起来都差不多。

iFrame 包含一个随机生成的图片，以及一个您单击后会将您重定向到另一个页面的按钮。所有功能都有效，只是样式。无论我尝试什么，我都无法删除嵌入在 iFrame 元素中的 img 标签周围的 2px 边框。在我放入 iFrame 的实际页面上，所有 3 个浏览器中的图像周围都没有边框，所以出于某种原因，IE 想要在这个 img 标签上放置另一个边框，当它位于主页上的 iFrame 中时......

这是嵌入在主页中的 iFrame。

<iframe src="~/Photos/PhotoViewer.aspx" runat="server" scrolling="no" frameBorder="0" class="PhotoViewer"></iframe>

这是css类

.PhotoViewer
{
    height: 200px;
    width: 100%;
    margin-left: 0px;
    outline: 0px;
    border:none;
    outline:none;
}

这是嵌入页面的一部分

.noBorder
{
    border:none;
    outline:none;
}
</style>
</head>
<body>
<form runat="server" class="noBorder" style="margin:0px;">
    <asp:HyperLink runat="server" NavigateUrl="~/Photos/Default.aspx" Target="_parent" class="noBorder"><img id="randPhoto" runat="server" alt="Photo Unavailable" class="noBorder"/></asp:HyperLink>
    <div style="border:none">
        <asp:Button runat="server" ID="btnUploadPhoto" OnClick="btnUploadPhoto_Click" class="button" style="border:none"/>
    </div>
</form>
</body>

我已尝试使用我可以在此网站上找到的大多数建议，例如：

a, img {border:none;}
img {border:none;}

我使用了 IE 的 css 调试功能（F12），我发现即使我在 img 周围放置所有这些边框：无/边框：0px，它仍然会在其周围放置 2px 边框。如何将 css 样式强制到 iFrame 内的 img 元素上？

【问题讨论】：

标签： css internet-explorer stylesheet image

【解决方案1】：

显然，如果您不将 DOCTYPE 应用于主 HTML，那么 IE 会随心所欲地处理事情......其中包括在内容周围设置边框。

或者，如果您使用的是旧版本的 Internet Explorer，或者通过此元标记强制更新的 Internet Explorer 像旧的 Internet Explorer 一样呈现：X-UA-Compatible

【讨论】：

【解决方案2】：

尝试将嵌入页面中的 CSS 更改为此；

.noBorder img
{
border:none;
outline:none;
}

【讨论】：

仍然没有运气...未嵌入 iFrame 的实际页面将在图像周围根本没有边框。但是由于某种原因，当我在 iFrame 中嵌入页面时，IE 会在图像周围放置一个边框
嵌入页面是否有边框：无；大纲：无；在 CSS 中？
嗯，我不知道到底发生了什么，但插入该代码后，它似乎可以在实时站点上运行。它可能是缓存问题或其他问题，但现在它已经消失了。谢谢。