2011-02-16 51 views
1

我在iframe中有div。 div應該呈現爲100%的寬度。在iframe中查看文檔而不是,div確實呈現爲100%。但是,在iframe中,它呈現90-95%。根據MS開發人員工具,iframe以及iframe文檔的主體均爲100%。這只是不是的div。該HTML:如何在Internet Explorer中呈現100%寬的div Quirksmode

<iframe frameborder="0" 
src="http://localhost:8080/pagedetails/73/true" id="su3-frame" 
hspace="0" vspace="0" 
leftmargin="0" rightmargin="0" topmargin="0" marginwidth="0"> 

    <html style="margin: 0pt; padding: 0pt;" 
      xmlns="http://www.w3.org/1999/xhtml"> 

     <body marginwidth="0" marginheight="0" id="su3-body" 
      leftmargin="0" topmargin="0" 
      style="margin: 0pt; padding: 0pt;"> 

     <div id="su3-header" 
       leftmargin="0" marginheight="0" 
       marginwidth="0" topmargin="0"> 

     </body> 
    </html> 
</iframe> 

和框架和DIV的CSS:

iframe#su3-frame { 
    width: 100%; 
    height: 60px; 
    border: 0;  
    margin: 0; 
    padding: 0; 
    position: fixed; 
    top: 0; left: 0; 
    z-index: 100000000; 
} 

div#su3-header { 
    font-family: arial, helvetica, sans-serif; 
    font-size: 12px; 
    color: #fff; 
    width: 100%; 
    height: 56px; 
    position: absolute; 
    padding: 0; 
    margin: 0; 
    line-height: 1; 
    top: 0; left: 0; 
    background: url('/images/bg-90.png'); 
    border: 0; 
    border-bottom: 4px solid #aaa; 
} 

任何想法,建議大加讚賞。

回答

2

iframe的內部,您可以自由指定所需的任何文檔類型;你可以逃離怪異模式,它不會影響「父頁面」。

<!DOCTYPE html> 
<html> 

在我的測試(這我不完全測試用例肯定匹配),改變了我的文檔的前兩行通過iframe到(例如)這些包括這是HTML5文檔類型)將iframe文檔置於標準模式,並解決了問題。

+0

啊是的,框架文檔中沒有文檔類型。應該有。我會看一看。 – 2011-02-16 17:36:08

+0

@thirtydoc - 實際指定了文檔類型,但複製粘貼失敗。它是<!DOCTYPE html PUBLIC「 - // W3C // DTD XHTML 1.0 Strict // EN」「http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd」> – 2011-02-16 17:43:10

1

你不是想把父母的CSS應用到iFrame上嗎?你可能都撞在同源策略

Apply CSS to iframe

你需要一個iFrame?作爲一名職業用戶界面開發人員,我認爲在15年的職業生涯中,我不得不總共使用3到4次。現在大多數人使用iFrames可以用Dom和Ajax克服。而且,如果您嘗試從同一個域名中調用iframe,理論上可以通過包含來獲取該內容。

相關問題