why can't you use iframe absolute positioning to set height/width
My question is similar to IFRAME and conflicting absolute positions, but I specifically want to know WHY you can't set both the left/right or top/bottom in an iframe and get it to work.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
iframe { position: absolute; display: block; top: 0; bottom: 0; left: 10px; width:100px; border: 1px solid black;}
div { position: absolute; display: block; top: 0; bottom: 0; left: 200px; width:100px; border: 1px solid black;}
</style>
</head>
<body>
<iframe></iframe>
<div></div>
</body>
</html>
The div takes up the full browser height. The iframe is 150px tall. It's the same in Chrome 17, Firefox 11, and IE9. Clearly this isn't a browser quirk. There's something in the HTML5 spec that says you can't set both left/right or top/bottom on an iframe in order to set the height.
What is special about iframes (vs. divs)?
Iframes are "replaced elements".
These are treated differently than non-replaced elements. Without going into the details, just look at the spec's table of contents: http://www.w3.org/TR/CSS21/visudet.html
10.3 Calculating widths and margins
10.3.1 Inline, non-replaced elements
10.3.2 Inline, replaced elements
10.3.3 Block-level, non-replaced elements in normal flow
10.3.4 Block-level, replaced elements in normal flow
10.3.5 Floating, non-replaced elements
10.3.6 Floating, replaced elements
10.3.7 Absolutely positioned, non-replaced elements // div
10.3.8 Absolutely positioned, replaced elements // iframe
10.3.9 'Inline-block', non-replaced elements in normal flow
10.3.10 'Inline-block', replaced elements in normal flow
It just will not work out. It is the way the iFrame is made.
If you still want to reach the same solution, then you use a div as wrapper with absolute position, your top, left, right, bottom. Put in that div your iFrame width width:100% and height:100%.
Problem solved.
链接地址: http://www.djcxy.com/p/89908.html上一篇: Iframe定位