互聯網瀏覽器和周圍的圖像邊框iFrame

所以我想解決一些與我正在工作的網站的CSS問題，除了1個iFrame元素，一切看起來幾乎相同。互聯網瀏覽器和周圍的圖像邊框iFrame

iFrame包含隨機生成的圖片，並且您單擊的按鈕會將您重定向到另一個頁面。所有功能的作品，只是它的造型。無論我嘗試什麼，我都無法刪除嵌入iFrame元素內部的img標籤周圍的2px邊框。在我放入iFrame的實際頁面中，在所有3種瀏覽器中圖像周圍都沒有邊框，因此由於某種原因，當IE瀏覽器在主頁上的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元素上？

來源

2012-07-10 Mike Chester

嘗試在嵌入式頁面中更改您的CSS;

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

來源

2012-07-10 17:36:11

仍然沒有運氣...的沒有嵌入到iFrame中的實際頁面，根本不會在圖像周圍顯示邊框。但由於某種原因，當我在iFrame IE中嵌入頁面時，會在圖像周圍放置邊框 – 2012-07-10 17:55:19

嵌入式頁面是否有邊框：none; 概要：無; 在CSS？ – 2012-07-11 02:55:51

嗯，我不知道究竟發生了什麼，但插入代碼後，它似乎在現場網站上工作。它可能是一個緩存問題或某事，但現在它已經消失了。謝謝。 – 2012-07-11 18:06:58

顯然，如果你沒有一個DOCTYPE主要適用於HTML那麼IE處理事情不過就是了......其中包括把一個邊框的東西。

或者，如果您正在使用Internet Explorer的舊版本，或迫使新的Internet Explorer來呈現作爲一個老的Internet Explorer將通過此meta標籤：X-UA兼容

來源

2013-10-15 04:31:30

互聯網瀏覽器和周圍的圖像邊框iFrame

回答

相關問題