在絕對div中嵌入iframe時出現瀏覽器問題

在絕對定位的div中嵌入具有特定src的iframe時遇到了一個奇怪的問題。這裏是頁面的基本標記：在絕對div中嵌入iframe時出現瀏覽器問題

.container { 
 
    position: relative; 
 
    overflow: hidden; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
html, body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.content { 
 
    position: absolute; 
 
    top: 50px; 
 
    right: -400px; 
 
    width: 300px; 
 
    height: 400px; 
 
    background-color: blue; 
 
} 
 
iframe { 
 
    width: 300px; 
 
    height: 200px; 
 
}

<div class="container"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo sit amet elit sed cursus. Fusce nibh nibh, venenatis consectetur hendrerit sed, aliquam sit amet eros. Sed sem augue, tristique ut odio sit amet, euismod bibendum nunc. Nullam ac ligula pharetra, ultrices lorem id, porttitor enim. Nullam sit amet sagittis erat. 
 
    <div class="content"> 
 
     <iframe src="https://app-apac.thebookingbutton.com/properties/yaangcomedirect"></iframe> 
 
    </div> 
 
</div>

股利.container覆蓋整個頁面;在裏面，有一個div .content相對於.content div絕對定位，它應該不可見，由right:-400px屬性和寬度隱藏，即300px。

當iframe加載時，整個頁面似乎被「滑動」到左邊。您可以通過插入的虛擬文本，即時剪切以及現在部分可見的iframe來查看此行爲。

這顯示，當iframe中仍然加載： https://i.imgsafe.org/89a753d.jpg

當iframe中加載，這是圖所示： https://i.imgsafe.org/8820624.jpg

我遇到了在Chrome，Firefox的這個問題，並在邊緣的最新的穩定版本，所以我認爲這可能不是瀏覽器問題。我知道iframe的其他來源工作得很好，並沒有顯示這個問題。另外，我知道一個交叉源框架無法獲得頂層框架的文檔屬性，這可能是使這個故事非常奇怪的原因。

此外，在Chrome或Firebug的開發者控制檯中，沒有任何節點顯示樣式屬性（如果某個javascript可以修改原始標記）。我很抱歉地說，我不控制iframe的內容，這是大多數情況下的交叉來源。

你能告訴我更多關於那個嗎？我讀過this question，這似乎是一個類似的情況，但它沒有幫助。

P.S.這是我的第一個StackOverflow問題，希望我一直擅長寫它:)隨時提出更多的問題。

編輯：絕對定位div必須在該位置。顯然它應該被隱藏起來，這就是想要的行爲。我無法弄清楚爲什麼在iframe加載後突然變得可見。

編輯2：我簡化了代碼，現在html, body規則只是爲了切斷頁面周圍的空白。

來源

2016-04-22 Marco

你的代碼有兩個問題。

第一個是無用的複雜性。

第二個問題是定位錯誤。 right property will place your element xunits from right edge。當你給它的值小於零。它將放在的右邊緣。

這裏是工作小提琴：JSFiddle。

MDN on position property。

MDN on right property。

那麼，爲什麼你的代碼沒有工作？因爲給幾乎每一個元素的overflow: hidden; width: 100%;你可以（無用的複雜性，只需添加它，你真的需要它;也避免讓任何規則html - 它可能會非常棘手）。裝車錯誤定位iframe瀏覽器滾動到它，並「半壁江山」後，內容的被切斷，因爲overflow的。

更新提琴：here。

更新的小提琴＃2（最好的）：JSFiddle。

來源

2016-04-22 10:40:56 Green

我試圖重現生產環境。包含iframe的div實際上應該在右邊後面，並且即使在iframe加載之後也應該在後面。關於複雜性，容器div必須在瀏覽器窗口的100％寬度和高度上。 – Marco

@MarcoTodisco請參閱爲什麼它不起作用的說明。 – Green

感謝您的有用編輯。我簡化了示例，從html和body選擇器中刪除了溢出和位置屬性。但問題仍然存在。實際上，瀏覽器會滾動到iframe，但如果iframe是交叉原點，這將如何實現？ – Marco

有一個問題與您的代碼，這是「正確的：-400px;」只是避免負面的跡象。用「right：400px;」替換它。

來源

2016-04-22 10:45:07 Laksh

在絕對div中嵌入iframe時出現瀏覽器問題

回答

相關問題