html - Enclosing div is higher than containing button -
i'm trying simple notification overlay. can see code here: http://jsfiddle.net/0uaqsz57/
relevant code this:
<div class="close"> <button class="btn action-link">close</button> </div>
and
.close { text-align: right; button { line-height: 1em; height: 1em; } }
notice button on right side (nevermind bad styling..). has height of 13px, according chrome dev-tools. enclosing div (.close), has height of 18px, no (css-)padding.
in firefox, button has height of 13.33 px , div height of 21px
in internet explorer height of button 5.33px , enclosing div height of 18.4px
so question is: 1. why this? standard allow behaviour , if so, why? couldn't find specific information on this. 2. how avoid this.
setting
height : 100%;
would robust option, live demo shows.
this because button can happily scale depending on screen size.
.close { text-align: right; button { line-height: 1em; height: 100%; } }
it means 'button' fill parent container (in case that's close div
).
Comments
Post a Comment