如何在浏览器之间解决不同的填充大小问题

Question

我认为自己是CSS 3的新手，所以我很感激你能提供任何帮助。

情况是我正在为我们的测试自动化套件创建一个仪表板。

到目前为止，我已经创建了一个体面的模板，但导航栏在浏览器中有不同的填充外观。在IE和Chrome中它看起来很好，但是在firefox 28中，填充似乎在导航栏项目的底部添加了一个额外的像素。

这是我的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;
    }

非常感谢任何帮助。欢呼声。

更新

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

Answer 1

您需要添加css reset或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文件的开头添加这两个中的任何一个。

Answer 2

您需要使用特定于浏览器的CSS才能在所有浏览器上获得准确的结果。 我的意思不是除了你出错之外的所有人，使用mozilla，Internet explorer或google chrome specific css。

Answer 3

如果你想让我有一个jQuery脚本来检测所有的导航器，那么脚本会将一个类添加到一个带有浏览器名称的主体。