如何更好地控制火狐和谷歌Chrome间距

Question

的CSS：

body { 
    background:black; 
    width:960px; 
    } 

    #jsddm a { 
    padding:5px 10px; 
    font:16px Calibri; 
    text-transform: uppercase; 
    text-decoration: none; 
    font-weight:bold; 
    border: 2px silver outset; 
    color: #000000; 
    text-shadow:-1px 0 #AAD036, 0 1px #AAD036, 1px 0 #AAD036, 0 -1px #AAD036; 
    } 
    #one a { 
    background:-webkit-linear-gradient(#FF0000, white 20%, #FF0000 80%); 
    background:-moz-linear-gradient(#FF0000, white 20%, #FF0000 80%); 
    background:linear-gradient(#FF0000, white 20%, #FF0000 80%); 
    } 

    #two a { 
    background:-webkit-linear-gradient(#FF00FF, white 20%, #FF00FF 80%); 
    background:-moz-linear-gradient(#FF00FF, white 20%, #FF00FF 80%); 
    background:linear-gradient(#FF00FF, white 20%, #FF00FF 80%); 
    } 

    #three a { 
    background:-webkit-linear-gradient(#00FFFF, white 20%, #00FFFF 80%); 
    background:-moz-linear-gradient(#00FFFF, white 20%, #00FFFF 80%); 
    background:linear-gradient(#00FFFF, white 20%, #00FFFF 80%); 
    } 

    #four a { 
    background:-webkit-linear-gradient(#00FF00, white 20%, #00FF00 80%); 
    background:-moz-linear-gradient(#00FF00, white 20%, #00FF00 80%); 
    background:linear-gradient(#00FF00, white 20%, #00FF00 80%); 
    } 

    #five a { 
    background:-webkit-linear-gradient(#FFFF00, white 20%, #FFFF00 80%); 
    background:-moz-linear-gradient(#FFFF00, white 20%, #FFFF00 80%); 
    background:linear-gradient(#FFFF00, white 20%, #FFFF00 80%); 
    } 
    #six a { 
    background:-webkit-linear-gradient(#990099, white 20%, #990099 80%); 
    background:-moz-linear-gradient(#990099, white 20%, #990099 80%); 
    background:linear-gradient(#990099, white 20%, #990099 80%); 
    } 

    #seven a { 
    background:-webkit-linear-gradient(#3366FF, white 20%, #3366FF 80%); 
    background:-moz-linear-gradient(#3366FF, white 20%, #3366FF 80%); 
    background:linear-gradient(#3366FF, white 20%, #3366FF 80%); 
    } 

    #eight a { 
    background:-webkit-linear-gradient(#FF9900, white 20%, #FF9900 80%); 
    background:-moz-linear-gradient(#FF9900, white 20%, #FF9900 80%); 
    background:linear-gradient(#FF9900, white 20%, #FF9900 80%); 
    } 


    #jsddm { 
    width: auto; 
    height:auto; 
    text-align:center; 
    margin-left:-42px; 
    margin-top:-10px 
    } 

    #jsddm li { 
    text-align:center; 
    padding: 0.5px; 
    display: inline; 
    width:auto; 
    height:inherit; 
    float: left; 
    } 


    #jsddm li a:hover { 
    color: #AAD036; 
    text-shadow:-1px 0 #669933, 0 1px #669933, 1px 0 #669933, 0 -1px #669933; 
    font: 16px Calibri; 
    padding-top: 6px; 
    font-weight: bold; 
    padding-bottom: 6px; 
    } 
    </style> 

的HTML：

<ul id="jsddm"> 
     <li id="one"><a href="index.html">About</a></li> 
     <li id="two"><a href="http://http://www.android.com/">Official&nbsp;Page</a></li> 
     <li id="three"><a href="http://developer.android.com/index.html">Developers</a></li> 
     <li id="four"><a href="https://play.google.com/store">Google&nbsp;Play</a></li> 
     <li id="five"><a href="http://www.android.com/phones-and-tablets/">Phones&nbsp;&amp;&nbsp;Tablets</a></li> 
     <li id="six"><a href="http://www.android.com/versions/kit-kat-4-4/">Kit&nbsp;Kat&nbsp;&#40;4.4&#41;</a></li> 
     <li id="seven"><a href="http://www.android.com/apps-and-entertainment/">Entertainment</a></li> 
     <li id="eight"><a href="https://plus.google.com/+android/posts">Google+</a></li> 
    </ul> 

家伙嗨，

我有一个jQuery头与不同颜色的按钮（LI ）为您带来独特的链接。我已经得到了很好的工作，但Firefox和Chrome中每个按钮的间距都不相同，如图所示。为了保持各自的宽高比，我一直在更改我的代码几个小时。我甚至去设置每个按钮的宽度。你们能帮我解决这个问题吗？

Answer 1

尝试使用normalize.css或reset.css，两者都将重置大多数的浏览器默认样式。

reset.css：http://meyerweb.com/eric/tools/css/reset/

normalize.css：http://necolas.github.io/normalize.css/

本文解释这两个复位文件之间的差异： http://nicolasgallagher.com/about-normalize-css/

Answer 2

的原因是，某些字体类型呈现不同截面的浏览器。我对此进行了测试，font:14px Courier;，它在Chrome和FF中给出了相同的宽度（但如果与IE或Safari比较，则可能不会）。

一种在“按钮/链接”跨浏览器上具有相同大小的方法是在其上设置大小。

演示：http://jsfiddle.net/gd8yy/1/

CSS：

body { 
     background:black; 
     width:960px; 
    } 
    #jsddm a { 
     display: inline-block; /* added - enables setting a width */ 
     padding:5px 0;   /* adjusted - left/right space is set with individual width */ 
     font: 16px Calibri; 
     text-transform: uppercase; 
     text-decoration: none; 
     font-weight:bold; 
     border: 2px silver outset; 
     color: #000000; 
     text-shadow:-1px 0 #AAD036, 0 1px #AAD036, 1px 0 #AAD036, 0 -1px #AAD036; 
    } 
    #one a { 
     width: 80px;  /* added */ 
     background:-webkit-linear-gradient(#FF0000, white 20%, #FF0000 80%); 
     background:-moz-linear-gradient(#FF0000, white 20%, #FF0000 80%); 
     background:linear-gradient(#FF0000, white 20%, #FF0000 80%); 
    } 
    #two a { 
     width: 125px;  /* added */ 
     background:-webkit-linear-gradient(#FF00FF, white 20%, #FF00FF 80%); 
     background:-moz-linear-gradient(#FF00FF, white 20%, #FF00FF 80%); 
     background:linear-gradient(#FF00FF, white 20%, #FF00FF 80%); 
    } 
    #three a { 
     width: 110px;  /* added */ 
     background:-webkit-linear-gradient(#00FFFF, white 20%, #00FFFF 80%); 
     background:-moz-linear-gradient(#00FFFF, white 20%, #00FFFF 80%); 
     background:linear-gradient(#00FFFF, white 20%, #00FFFF 80%); 
    } 
    #four a { 
     width: 110px;  /* added */ 
     background:-webkit-linear-gradient(#00FF00, white 20%, #00FF00 80%); 
     background:-moz-linear-gradient(#00FF00, white 20%, #00FF00 80%); 
     background:linear-gradient(#00FF00, white 20%, #00FF00 80%); 
    } 
    #five a { 
     width: 145px;  /* added */ 
     background:-webkit-linear-gradient(#FFFF00, white 20%, #FFFF00 80%); 
     background:-moz-linear-gradient(#FFFF00, white 20%, #FFFF00 80%); 
     background:linear-gradient(#FFFF00, white 20%, #FFFF00 80%); 
    } 
    #six a { 
     width: 115px;  /* added */ 
     background:-webkit-linear-gradient(#990099, white 20%, #990099 80%); 
     background:-moz-linear-gradient(#990099, white 20%, #990099 80%); 
     background:linear-gradient(#990099, white 20%, #990099 80%); 
    } 
    #seven a { 
     width: 135px;  /* added */ 
     background:-webkit-linear-gradient(#3366FF, white 20%, #3366FF 80%); 
     background:-moz-linear-gradient(#3366FF, white 20%, #3366FF 80%); 
     background:linear-gradient(#3366FF, white 20%, #3366FF 80%); 
    } 
    #eight a { 
     width: 80px;  /* added */ 
     background:-webkit-linear-gradient(#FF9900, white 20%, #FF9900 80%); 
     background:-moz-linear-gradient(#FF9900, white 20%, #FF9900 80%); 
     background:linear-gradient(#FF9900, white 20%, #FF9900 80%); 
    } 
    #jsddm { 
     width: auto; 
     height:auto; 
     text-align:center; 
     margin-left:-42px; 
     margin-top:-10px 
    } 
    #jsddm li { 
     text-align:center; 
     padding: 0.5px; 
     display: inline; 
     width:auto; 
     height:inherit; 
     float: left; 
    } 
    #jsddm li a:hover { 
     color: #AAD036; 
     text-shadow:-1px 0 #669933, 0 1px #669933, 1px 0 #669933, 0 -1px #669933; 
     font: 16px Calibri; 
     padding-top: 6px; 
     font-weight: bold; 
     padding-bottom: 6px; 
    }