css - hr makes the parent div resize to 100% in IE7 -
i have following div
<body> <span style="border:1px solid red; display:inline-block"> text<br /> <hr /> more text </span> </body>
in "normal" web browsers, width of div calculated fit text. , hr
100% of div.
but in ie7 hr
causes div expand 100% of body.
is there clever css need add somewhere behaves correctly in ie7?
please note, can't set fixed width.
the width
property of <hr>
tag has been deprecated, you're styling options limited on <hr>
tag.
a more modern approach use border
property of <div>
instead.
image rendered ie 7:
image rendered chrome 19:
html
<body> <div style="border:1px solid red; float:left;"> <p> text </p> <p class="border-top"> more text </p> </div> </body>
css
.border-top{ border-top:#000 1px solid; padding-top:1em; }
note: ie 6 & 7 don't support display:inline-block
, might need use float:left
instead. article below compares use of aforementioned properties:
Comments
Post a Comment