IE6: Height "1em minus 1px"
I need a div with a height of exactly 1em minus 1px. This can be achieved in most browsers like this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
.helper {
/* background-color: black; */
position: absolute;
top: 5em;
left: 5em;
width: 2em;
height: 1em;
}
.target {
background-color: #89f;
position: absolute;
top: 0;
bottom: 1px;
width: 100%;
}
</style>
</head>
<body>
<div class="helper"&开发者_JS百科gt;
<div class="target"></div>
</div>
</body>
</html>
The "target" div has the desired height. The problem is, that this doesn't work in IE6, because it ignores the bottom attribute, when top is set (a well known problem).
Is there a workaround for IE6 (maybe with multiple nested divs, with borders/paddings/margins/whatever), or will JavaScript be the only solution?
Please note, that I can't use Quirks Mode.
Does the target div have to be physically 1px smaller or just display 1px smaller?
The easiest way would be to add in an "ie6 only" stylesheet:
.helper {overflow:hidden;}
.target {top:auto;}
This will display target as 1em - 1px but its real height is 1em with the top 1px is hidden.
IE6 is flaky when it comes to absolute positioning support.
Another solution, instead of the code above, would be to add in an "ie6 only" stylesheet:
.target {position:static;margin:-1px 0 1px 0;}
I see you got the absolute positioned solution to work. Great!
Is it required by the client? If not then just abandon IE6 and hacks for this crappy/old browser.
加载中,请稍侯......
精彩评论