I am trying to make the div at the bottom float to the right and appear at the bottom of it's pare开发者_开发问答nt. This markup is working for all my browsers except when I put IE9 in Browser Mode: IE9 and Document Mode IE7 standards (which is the one I need to use.)
For some reason with these settings the grey border around test in div extends all the way to the left of the parent div when I need it to just go around the text like it does in FF or Chrome. By the way, I hate IE7 for this crap. The markup is totaly logical and should work but IE7 just has to be a jerk.
<div style="width: 200px;">
<div style=" height: 400px; border: 1px solid #000000;">
</div>
<div style="border: 1px solid #c0c0c0; position: relative; height:15px; bottom: 19px; left: -2px; float:right;">
<div style="height: 15px; float: right;">
Text in div</div>
</div>
</div>
You could switch to using position: relative
/position: absolute
:
http://jsfiddle.net/5fdcV/
<div style="width: 200px; position: relative">
<div style=" height: 400px; border: 1px solid #000000;">
</div>
<div style="border: 1px solid #c0c0c0; position: absolute; height:15px; bottom: 2px; right: 2px;">
<div style="height: 15px;">
Text in div</div>
</div>
</div>
IE7 is kind of dumb. You may need to give the DIV an explicit width, so that IE7 doesn't get lost without it.
精彩评论