Internet Explorer和iFrame中的图像边框

所以我正在尝试修复我正在开发的网站的一些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（F12）的css调试功能，我发现即使我在img周围放了所有这些border:none/bborder:0px，它仍然会在它周围放一个2px的边框。我如何才能在iFrame内的img元素上强制使用css样式？

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

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

显然，如果你不将DOCTYPE应用于主HTML，那么IE可以随心所欲地处理事情……这包括在内容周围设置边框。

或者，如果您正在使用旧版本的Internet Explorer，或者通过以下元标记强制新的Internet Explorer渲染为旧的Internet Explorer：X-UA-Compatible

相关内容

最新更新

热门标签：