Max/min(width and height) is not behaving as it should?
I have tried the code in a tutorial http://www.quirksmode.org/css/width.html as开发者_Go百科 follows:
<html>
<head>
<style type="text/css">
p{
border: 2px solid #6374AB;
padding: 10px;
}
p.test1{max-width:50px;}
p.test2{min-width:800px;}
p.test3{max-height:20px;}
p.test4{min-height:200px;}
p.test5{
max-height:50px;
max:width:50px;
}
</style>
</head>
<body>
<p>This is the default test paragraph. All paragraphs below have an extra min/max declaration added.</p>
<p class="test1">Test paragraph with max-width: 50px</p>
<p class="test2">Test paragraph with min-width: 800px</p>
<p class="test3">Test paragraph with max-height: 20px, even though I put a lot of content in just to try to stretch it a tiny little bit (which, of course, doesn't work thanks to the Power of Standards).</p>
<p class="test4">Test paragraph with min-height: 200px</p>
<p class="test5">Test paragraph with max-height: 50px; max-width: 50px</p>
</body>
</html>
But the problem is that the results which have been shown in http://www.quirksmode.org/css/width.html are not what iam getting and max/min(width and height) are not supposed to be working. Can anybody please explain this to me? My current browser is IE8.Thanks....
You need to turn on compatibility mode in IE8 to view your page correctly. (click the button with a 'teared page' icon next to the addressbar.)
This is because IE8 makes its own decision on how to render the pages when it can't tell if they are in quirks mode or not.
精彩评论