| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> |
| <head> |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
| <title>height claculation bug in nested absolute positioned elements</title> |
| <style type="text/css"> |
| html, body { margin:0;} |
| div { position:absolute; border: 1px solid gray; margin:0; } |
| </style> |
| </head> |
| <body> |
| <!-- <div style="top: 100px; height:80%; left: 50px; width:80% "> this setting gives correct calculation --> |
| <div style="top: 100px; bottom: 100px; left: 50px; right:50px "> |
| <div style="top:10%;height:80%; width:80%; border-color: red"> |
| <img src="resources/icon-gold.png" alt="" style="height:100%; width:auto;" /> |
| <!-- <img src="http://webkit.org/images/icon-gold.png" alt="" style="height:auto; width:100%;" /> this is ok --> |
| </div> |
| </div> |
| </body> |
| </html> |
