如何在Internet Explorer Quirksmode中渲染div 100％宽 [英] How to render a div 100% wide in Internet Explorer Quirksmode
问题描述
我在 iframe 中有一个 div 。 div应该以100％的宽度渲染。查看iframe中的文档而不是，div确实以100％呈现。然而，当在iframe中时，它呈现90-95％。根据MS开发者工具，iframe，以及iframe文档的正文都是100％。它只是div不是。 HTML：
< iframe frameborder =0
src =http：// localhost：8080 / pagedetails / 73 / trueid =su3-frame
hspace =0vspace =0
leftmargin =0rightmargin =0topmargin =0marginwidth = >
< html style =margin：0pt; padding：0pt;
xmlns =http://www.w3.org/1999/xhtml>
< body marginwidth =0marginheight =0id =su3-body
leftmargin =0topmargin =0
style = ：0pt; padding：0pt;>
< div id =su3-header
leftmargin =0marginheight =0
marginwidth =0topmargin =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;
}
任何想法，建议非常感激。
<在
iframe 里面，你可以自由地指定你想要什么样的doctype; 在我的测试中（我不会完全 >确定与您的测试用例匹配），通过 iframe 更改我的文档的前两行（例如）：
<！DOCTYPE html>
< html>
（这是HTML5 doctype iframe 文档转换为标准模式，并修复问题。
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.
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.
这篇关于如何在Internet Explorer Quirksmode中渲染div 100％宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
