Question

所以我正在尝试修复我正在处理的网站的一些css问题，除了1个iFrame元素外，一切看起来都差不多。

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

这是主页中嵌入的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调试功能，我发现即使我把所有这些边框：无/边框：0px围绕img，它仍然围绕它放置一个2px边框。如何将css样式强制转换为iFrame中的img元素？

Answer 1

尝试将嵌入页面中的CSS更改为此内容;

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

Answer 2

显然，如果你没有将DOCTYPE应用于主HTML，那么IE会处理它想要的东西......其中包括在边框周围放置边框。

或者，如果您使用的是较早版本的Internet Explorer，或者强制较新的Internet Explorer通过此元标记呈现为旧的Internet Explorer：X-UA兼容

图像IN iFrame中的Internet Explorer和边框

2 个答案: