S
Summercool
Sometimes we are forced to use Quirks mode (such as embedding code in
other people's profile box, etc).
In that case, IE will show the box model by putting the "padding and
border" inside the width and height, while Firefox and Safari will put
it outside, the same as the CSS box model.
Now, to hack around it, there is these solutions:
http://webdesign.about.com/od/css/a/aaboxmodelhack.htm
what is known as Tan hack or is it the same as Tantek hack... and it
involves exploiting other bugs in the browser...
but I wonder, why don't we just declare 3 div's
<!-------------------- The code for Quirks mode -------------------->
<body style="background:yellow">
<div style="width:360px; height:360px; margin:0px; padding: 0px;
border: 0px">
<div style="padding:20px; border:10px solid black;background
range">
<div style="height:300px;width:300px;margin:0px;padding:0px;
border:none;backgroundrange">
Hello World
</div>
</div>
</div>
</body>
<!--------------- The code for Standard Compliance mode ---------------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<body style="background:yellow">
<div style="width:300px; height:300px; margin:0px; padding: 20px;
border: 10px solid black;backgroundrange">
Hello World
</div>
</body>
So code #1 can simulate code #2, and it renders the same in IE and
Firefox's quirks mode, without having to exploit any bug in browsers.
and code #1, even if it is used in Standard Compliance mode, it would
still render the same, regardless of what mode it is in...
other people's profile box, etc).
In that case, IE will show the box model by putting the "padding and
border" inside the width and height, while Firefox and Safari will put
it outside, the same as the CSS box model.
Now, to hack around it, there is these solutions:
http://webdesign.about.com/od/css/a/aaboxmodelhack.htm
what is known as Tan hack or is it the same as Tantek hack... and it
involves exploiting other bugs in the browser...
but I wonder, why don't we just declare 3 div's
<!-------------------- The code for Quirks mode -------------------->
<body style="background:yellow">
<div style="width:360px; height:360px; margin:0px; padding: 0px;
border: 0px">
<div style="padding:20px; border:10px solid black;background
range"><div style="height:300px;width:300px;margin:0px;padding:0px;
border:none;background
range">Hello World
</div>
</div>
</div>
</body>
<!--------------- The code for Standard Compliance mode ---------------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<body style="background:yellow">
<div style="width:300px; height:300px; margin:0px; padding: 20px;
border: 10px solid black;background
range">Hello World
</div>
</body>
So code #1 can simulate code #2, and it renders the same in IE and
Firefox's quirks mode, without having to exploit any bug in browsers.
and code #1, even if it is used in Standard Compliance mode, it would
still render the same, regardless of what mode it is in...