所以我正在尝试修复我正在处理的网站的一些 css 问题,除了 1 个 iFrame 元素外,一切看起来都差不多。
iFrame 包含一张随机生成的图片,以及一个您单击后会将您重定向到另一个页面的按钮。所有功能都有效,只是样式。无论我尝试什么,我都无法删除嵌入在 iFrame 元素中的 img 标签周围的 2px 边框。在我放入 iFrame 的实际页面上,所有 3 个浏览器中的图像周围都没有边框,因此出于某种原因,当 img 标签位于主页上的 iFrame 中时,IE 想要在此 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 调试功能,我发现即使我将所有这些 border: none/border: 0px 放在 img 周围,它仍然会在它周围放置一个 2px 的边框。如何将 css 样式强制应用到 iFrame 内的 img 元素上?
最佳答案
尝试将嵌入式页面中的 CSS 更改为此;
.noBorder img
{
border:none;
outline:none;
}
关于css - Internet Explorer 和 Border around Image IN iFrame,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11418224/