相同的 CSS 在非 Chromium 浏览器上给出不同的结果答案

【问题标题】：Same CSS gives different results on non-chromium browsers相同的 CSS 在非 Chromium 浏览器上给出不同的结果
【发布时间】：2015-08-16 06:49:24
【问题描述】：

我的CSS 在不同的浏览器上给出不同的结果，尤其是在non-chromium 像Firefox 这样的浏览器上，而结果在chromium-based 像Google Chrome 和Opera 这样的浏览器上是正常的。
我了解这是浏览器合规性问题。我该如何处理？

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%
}

在基于 Chromium 的浏览器上 -

在 FireFox（非 Chromium）上 -

【问题讨论】：

这可能是因为浏览器使用了用户代理样式表。它们是“默认样式”。注意<input>s 之间的差异，您应该应用width:??px 和margin:0; padding:0 之类的重置样式以提供更统一的结果
我正在使用normalize.css。有什么帮助吗？
是的，我不太确定，因为我个人不使用它。但谷歌说是的。
有什么可能的方法可以专门针对那些非铬火狐浏览器并修复它？
@-moz-document url-prefix() { .selector { color:lime; } }

标签： html css google-chrome firefox chromium

【解决方案1】：

基本上你应该重置样式表，以减少浏览器差异（行高、边距和字体大小）等，可以重置.css、normalize.css，然后只应用你的样式

否则，这里是表单的不同元素在不同浏览器中的外观示例： http://medialize.github.io/ally.js/tests/focus-outline-styles/index.html

【讨论】：

您能添加包装器并创建jsfiddle.net 吗？我会尽力帮助那里的