Geek Answers Handbook

Setting the maximum height max does not work

I have this simple HTML

<html> <head> <style> </style> </head> <body> <div style="position: relative; overflow: visible; width: 100%; height: 100%;" class="surface"> <div style="width: 300px; max-height: 2px; height: 2px; position: absolute; left: 36.165px; top: 0.8957px; border: 1px solid red;"></div> <div style="width: 1px; height: 200px; position: absolute; left: 30.165px; top: 47.8957px; border: 1px solid red;"></div> </div> </body> </html>

Basically two div s: one “horizontal” (height 2px) and one “vertical” (height 2px).

When I view a page on firefox:

enter image description here

while on IE (8) something related happens:

enter image description here

top div is not high 2px.

Any idea why so?

+6
source share
5 answers

Your possible solutions:

1). Add display: block to your style

2). make sure you have the correct DOCTYPE otherwise (IE) mode, will create unexpected format and results. Check this article for reference.

+3
source

Your problem seems to be related to quirks mode .

This happens when there is no description of doctype. The maximum height, by the way (including the box model), acts as if it is equal to ie5. A simple solution is to add a doctype declaration:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+4
source

IE7, 8, and 9 work great here.

You really don't need max-height , but setting display: block and / or line-height: 2px instead may be the solution.

+3
source

I suspect it will be IE by adding some “useful” settings in quirks mode, which pushes the height of the container to the minimum height of the text. Try setting line-height: 2px; for IE8 and below (conditional comments, maybe?), and that should sort it out.

+1
source

In my case there was

min-height

to override other settings

0
source

More articles:


All Articles