html - :before element not displaying properly in firefox -
why firefox misplace :before element??
<div id='remember_forgot' class='no_hl'> <div> <input id='remember_me' type='checkbox'> <label for='remember_me'>remember me</label> </div> </div> * { font-family: 'helvetica neue', helvetica, arial, sans-serif; font-size: 14px; line-height: 1.3; font-weight: normal; } input[type='checkbox'] { display: none; } #remember_forgot { display: flex; align-items: center; justify-content: space-between; margin: 2px 0; } #remember_forgot>div { position: relative; display: flex; align-items: center; } #remember_me+label:before { position: relative; top: 1px; content: ""; display: block; float: left; width: 13px; height: 13px; margin-right: 4px; font-size: 15px; line-height: 0.8; border: 1px solid black; } #remember_me:checked+label:before { content:'✓'; color: black; } #remember_me+label { display: inline-block; margin-left: 0px; color: black; font-size: 13px; } #remember_me+label:hover { color: #e1b941; } #remember_me, #remember_me+label, #forgot { cursor: pointer; } #remember_me+label { transition: 0.2s all; }
all of relevant code here in fiddle: http://jsfiddle.net/kjf8h5m6/7/
when open in chrome checkbox :before element centered:
but when viewed in firefox checkbox looks not centered:
this annoying.. please help!
(left chrome, right firefox)
removing wildcard line-height: *{line-height:1.3;}
, , adding line-height of 1.5 label element solves in both firefox , chrome.
working fix: http://jsfiddle.net/kjf8h5m6/9/
Comments
Post a Comment