如何解決瀏覽器之間不同填充大小的問題

我認爲自己是CSS 3的新手，所以我會很感激您可以給予的任何幫助。如何解決瀏覽器之間不同填充大小的問題

情況是，我爲我們的測試自動化套件創建了一個儀表板。

到目前爲止，我已經創建了一個體面的外觀模板，但導航欄在瀏覽器中具有不同的填充外觀。在IE和Chrome中，它看起來很好，但是在Firefox中，填充似乎在導航欄項的底部添加了一個額外的像素。

這裏是我的CSS：

<style type='text/css'> 

    html { 
      display: table; 
      margin: auto; 
      overflow-y: scroll; 
     } 

     body { 
      display: table-cell; 
      vertical-align: middle; 
      font: 10pt Arial, Helvetica, Sans-serif; 
      width: 800px; 
      margin:0px; 
     } 

    #contentPane 
    { 
     background-color:#D5D5D5; 
     border-left: 1px solid #752864; 
     border-right:1px solid #752864; 
     border-bottom:1px solid #752864; 
    } 

    #logoContainer 
    { 
     background-color:#FFFFFF; 
     height: 60px; 
    } 

    #logoLeft 
    { 
     float: left; 
    } 

    #logoRight 
    { 
     float: right; 
     margin-top: 18px; 
     margin-right: 20px; 
     font: bold 20px "Arial"; 
     color: #752864; 
    } 

    /*navigation link CSS*/ 

    #nav { 
     font-weight:bold; 
     margin-bottom:20px; 
     text-align: center; 
     width: 800px; 
     background-color:#752864; 
     height: auto; 
    } 
    #nav ul { 
      height: auto; 
      padding-top: 10px; 
      padding-bottom: 10px; 
      margin: 0px; 
    } 
    #nav li { 
     display: inline; 
    } 

    #nav li a { 
     padding-left: 10px; 
     padding-right: 10px; 
     padding-top: 10px; 
     padding-bottom: 10px; 
     text-decoration: none; 
     color: #FFFFFF; 
     background-color:#752864; 
     font-family: 'Verdana', 'Lucida Grande', Sans-Serif; 
    } 

    #nav li a:hover { 
     color: #752864; 
     background-color: #FFFFFF; 
    } 

    #testtitle 
    { 
     padding-left: 10px; 
    } 

    /*table CSS*/ 

    #gradient-style 
    { 
     font-family: 'Verdana', 'Lucida Grande', Sans-Serif; 
     font-size: 12px; 
     width: 800px; 
     text-align: left; 
     border-collapse: collapse; 
    } 

    #gradient-style th 
    { 
     font-size: 13px; 
     font-weight: bold; 
     padding: 8px; 
     background: #752864 url('table-images/gradhead.png') repeat-x; 
     border-bottom: 1px solid #752864; 
     color: #FFFFFF; 
    } 

    #gradient-style td 
    { 
     padding: 8px; 
     border-bottom: 1px solid #752864; 
     border-left: 1px solid #752864; 
     color: #000000; 
     border-top: 1px solid #752864; 
     background: #D5D5D5 url('table-images/gradback.png') repeat-x; 
    } 
    .imagecontainer{ 

     text-align: center; 
     border-left: 0px !important; 
    } 

    #gradient-style tbody tr td.passcell 
    { 
     padding: 8px; 
     border-bottom: 1px solid #752864; 
     border-left: 1px solid #752864; 
     color: #FFFFFF; 
     border-top: 1px solid #752864; 
     background: #199A19 url('table-images/gradback.png') repeat-x; 
    } 

    #gradient-style tbody tr td.failcell 
    { 
     padding: 8px; 
     border-bottom: 1px solid #752864; 
     border-left: 1px solid #752864; 
     color: #FFFFFF; 
     border-top: 1px solid #752864; 
     background: #FF3333 url('table-images/gradback.png') repeat-x; 
    } 
    #gradient-style tbody tr td.warningcell 
    { 
     padding: 8px; 
     border-bottom: 1px solid #752864; 
     border-left: 1px solid #752864; 
     color: #FFFFFF; 
     border-top: 1px solid #752864; 
     background: #FF6600 url('table-images/gradback.png') repeat-x; 
    } 

    #gradient-style tfoot tr td 
    { 
     background: #e8edff; 
     font-size: 12px; 
     color: #99c; 
    } 

    #gradient-style tbody tr:hover td 
    { 
     background: #005ECF url('table-images/gradhover.png') ; 
     color: #FFFFFF; 
    }  

    a { 
     text-decoration: none; 
    } 

    #ExpandAllElements{ 
     float: bottom; 
    } 
    .expand_all { 
     cursor: pointer; 
    } 
    .collapse_all { 
     cursor: pointer; 
    } 
    .expandCollapse_Collapsed{ 
     cursor: pointer; 
     font-weight: bold; 
     color: white; 
     display: block; 
     padding: 5px 2px 5px 22px; 
     width: 150px; 
     background: #005ECF 
     url('images/expand.gif') no-repeat 5px 50%; 
     margin-left: 10px; 
    } 
    .expandCollapse_Expanded{ 
     url('images/collapse.gif') no-repeat 5px 50%; 
    } 

    /*SubTest CSS*/ 

    #body_log 
    { 
     word-wrap: break-word; 
    } 


</style>

這裏是我的HTML：

<a name = 'top'> </a> 
<div id='contentPane'> 

<div id='logoContainer'> 
    <img id='logoLeft' src='images/CPULogof.gif'/> 
    <div id='logoRight'>Bristol Automation</div> 
</div> 
<div id='nav'> 
    <ul> 
     <li> 
      <a href='' target='_blank'>Global Automation Hub</a> 
     </li> 
     <li> 
      <a href='' target='_blank'>UK Automation</a> 
     </li> 
     <li> 
      <a href='' target='_blank'>UK QA Home</a> 
     </li> 
    </ul> 
</div> 

<table id='gradient-style' summary='Test Results'> 
    <thead> 
     <tr> 
      <th scope='col' colspan='3'>Automated Test Finished</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td class='imagecontainer' rowspan='8'> 
       <img height='100' width='100' src='images/AutoTestCogf.png'/> 
      </td> 
     </tr> 
     <tr> 
      <td rowspan='2'>Test Name: Agent_Registration_TestClass</td> 
     </tr> 
     <tr> 
      <td class='gradient-style td passcell' rowspan='1'>Result Status: Pass</td> 
     </tr> 
     <tr> 
      <td rowspan='2'>Start Time: 12:24</td> 
     </tr> 
     <tr> 
      <td rowspan='1'>EndTime: 12:25</td> 
     </tr> 
       <tr> 
      <td colspan='2' rowspan='1'>Elapsed Time: 0 Seconds</td> 
     </tr> 
     <tr> 
      <td rowspan='2'>Run by: JohnN</td> 
     </tr> 
     <tr> 
      <td rowspan='1'>Machine: BRSL1960</td> 
     </tr> 
    </tbody> 
</table> 

<div id='testtitle'> 
    <p><font face='Verdana'><h2><b><font color='black'>Test Results For: Agent_Registration_TestClass</font></b></h2></font></p> 
</div> 

<div><a id='expandAllBoxes' class='expandCollapse_Collapsed'>Expand/Collapse All</a> </div> 
<br> 
</div> 

<div> 
<a href= '#top'> Up to Top ^^ </a> 
<p>TestResults v0.85 written by Bristol Automation Team 
<a href='' target='_blank'>Click here to visit our sharepoint!</a></p> 
</div>

我明白，我可以使用一些CSS來檢測，如果瀏覽器是Firefox和改變基於該填充，但似乎沒有工作。從我可以看到下面的代碼塊是問題所在：

#nav li a { 
     padding-left: 10px; 
     padding-right: 10px; 
     padding-top: 10px; 
     padding-bottom: 10px; 
     text-decoration: none; 
     color: #FFFFFF; 
     background-color:#752864; 
     font-family: 'Verdana', 'Lucida Grande', Sans-Serif; 
    }

任何幫助將不勝感激。乾杯。

UPDATE

這裏是JS小提琴http://jsfiddle.net/Vwr3x/

來源

2014-04-25 Festivejelly

[CSS Reset]（http://meyerweb.com/eric/tools/css/reset/）會很有用。 –

或者Normalize.css - http://necolas.github.io/normalize.css/ –

所有的代碼可以放在一個[的jsfiddle（http://jsfiddle.net/），所以我們不必涉水通過它。 – Moob

您需要添加CSS復位或normalize.css中和瀏覽器默認樣式

reset.css

/* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126 
    License: none (public domain) 
*/ 

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 
body { 
    line-height: 1; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
}

Normalize.css

在您的style.css文件的開頭添加這兩者中的任意一個。

來源

2014-04-25 09:34:33 Orahmax

嗨Orahmax我想你的解決方案，但它沒有似乎工作，它只是破壞了我所有的格式。 – Festivejelly

首先，您應該使用被認爲是良好實踐的外部樣式表。第二件事情是，這個（reset.css）是公認的用來解決方案來抵消基於瀏覽器的造型，並應爲你肯定工作。 – Orahmax

所以基本上把我的CSS從我的HTML中拿出來放在一個單獨的CSS文件中並引用Normalize.css和我自己的style.css？ – Festivejelly

你需要使用瀏覽器特定的CSS讓所有的瀏覽器準確的結果。我的意思不是所有的，但你錯了，使用Mozilla，Internet Explorer或谷歌瀏覽器特定的CSS。

來源

2014-04-25 09:36:31 raeeschaudhary

，如果你想我有一個jQuery腳本來檢測所有的導航儀，那麼腳本類添加到身體與瀏覽器的名稱。

來源

2014-04-25 09:37:32 Luiggi

如何解決瀏覽器之間不同填充大小的問題

回答

相關問題