How do I set the minimum height for a div in IE7?
I need to set the minimum height of a div. In Firefox everything is good, but I'm having trouble with IE7 - an unintended big space.
ul, il {
list-style: none;
padding: 0px;
margin: 0px;
}
.p_block{
color: #336699;
font-size: 14px;
min-height: 18px;
}
<ul>
<li><a href="#"><div class="p_block">text</div>开发者_如何学Python;</a></li>
<li><a href="#"><div class="p_block">text</div></a></li>
<li><a href="#"><div class="p_block">text</div></a></li>
<li><a href="#"><div class="p_block">text</div></a></li>
</ul>
Strangely, if I delete padding: 0px;
from ul, li
, everything works fine. Why?
@Chinmayee, the problem with that solution is that the element's height will not be able to grow past 18px in firefox and a few others.
A good cross-browser solution to min-height:
{
height: auto !important;
height: 200px;
min-height: 200px;
}
Basically;
Line #1: most modern browsers understand !important, therefore will not overwrite the property in the next line.
Line #2: because older browsers do not know !important, it must be a set height. Older browsers will allow the element to grow unless there is an overflow: property set.
Line #3: Modern browsers understand min- and !important. So modern browsers understand height:auto and min-height:200px, while older browsers understand height:200px; but will allow the element to grow ;)
Here's a solution that I prefer:
.p_block{
color: #336699;
font-size: 14px;
min-height: 18px;
}
Then for IE use this:
.p_block{
height: 18px;
}
IE treats height as min-height so it will grow.
You can target IE by including a specific IE6 & 7 CSS file as shown below (goes in the < head >)
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie6-hacks.css" />
<script type="text/javascript">
// IE6 Background Hover Flicker Fix
try {
document.execCommand('BackgroundImageCache',false,true);
}catch(ignoreme){
}
</script>
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7-hacks.css" />
<![endif]-->
Miss out the auto height
and the important and add *
before the height
.
This will then only be applied to IE7 and below.
.p_block{
min-height: 30px;
*height: 30px;
}
It's what I used, IE7 won't use min-height
but will set the height
to 30px
and will go bigger if required.
use this CSS for IE & FF
.p_block{
color: #336699;
font-size: 14px;
min-height: 18px;
height:18px !important;
}
精彩评论