My CSS is producing different outcomes on various browsers, particularly on non-chromium browsers such as Firefox, while the results remain consistent on chromium-based browsers like Google Chrome and Opera.
It seems to be a browser compliance issue. How should I address this?
HTML
<div class="login-username">
Email or Number
<br> <input type="text" autofocus>
</div>
<div class="login-radio">
<input type="checkbox"/>Keep me logged in
</div>
<div class="login-password">
Password
<br><input type="password"><br>
<a href="#">Forgotten your password?</a>
</div>
CSS
.login-username {
position: fixed;
left:60%;
top: 2%;
color: white;
font-family: 'Raleway';
font-size: 11px;
}
.login-radio {
font-size: 11px;
position: fixed;
left:61%;
top: 7%;
color: white;
font-family: 'Raleway';
vertical-align: middle;
}
.login-radio input{
vertical-align: middle;
}
.login-password {
position: fixed;
left:74%;
top: 2%;
color: white;
font-family: 'Raleway';
font-size: 11px;
display: inline;
}
.login-password a {
position: fixed;
top: 7.3%;
color: white;
vertical-align: baseline;
left: 75%
}
On Chromium-based Browsers - https://i.sstatic.net/10mIA.png
On FireFox (Non-Chromium) - https://i.sstatic.net/nmcRU.png