더 나은 파이어 폭스와 구글 크롬 간격에게 CSS

Question

를 제어하는 ​​방법 :

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와 헤더가

(리) 당신에게 고유 한 링크를 가져옵니다. 잘 작동하지만 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

이유는 몇 가지 글꼴 유형이 다른 크로스 브라우저를 렌더링하는 것입니다. 필자는 이것을 Chrome과 FF에서 동일한 너비를 제공하는 font:14px Courier;으로 변경하여 테스트했습니다 (하지만 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; 
    }