How to render a div 100% wide in Internet Explorer Quirksmode

问题

I have a div in an iframe. The div is supposed to render at 100% width. Looking at the document not in an iframe, the div does indeed render at 100%. When in an iframe however, it renders at 90 - 95%. According to the MS developer tool the iframe, and indeed the body of the iframe document are both at 100%. It's just the div that is not. The HTML:

<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>

and the css for the frame and div:

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; 
}

Any thoughts, suggestions much appreciated.

回答1:

Inside your iframe, you're free to specify whatever doctype you want; you can escape from Quirks Mode, and it won't affect the "parent page".

In my test (which I'm not entirely sure matches your test case), changing the first two lines of my document included via iframe to (for example) these :

<!DOCTYPE html>
<html>

(that's the HTML5 doctype) puts the iframe document into Standards Mode, and fixes the issue.

回答2:

You're not trying to apply the parent's CSS to the iFrame, are you? You might be bumping up against the Same Origin Policy

Apply CSS to iframe

Do you NEED an iFrame? As a professional UI Developer I think I've had to use one 3 or 4 times in total over a 15 year career. Most of what people use iFrames for can be overcome with the Dom and Ajax these days. And, if you're trying to call an iframe out of the same domain, in theory you could just grab that content via includes.

来源：https://stackoverflow.com/questions/5017983/how-to-render-a-div-100-wide-in-internet-explorer-quirksmode

标签

css

iframe

html

quirks-mode