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: enter image description here

but when viewed in firefox checkbox looks not centered: enter image description here

this annoying.. please help!

enter image description here

(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

Popular posts from this blog

python - mat is not a numerical tuple : openCV error -

c# - MSAA finds controls UI Automation doesn't -

wordpress - .htaccess: RewriteRule: bad flag delimiters -