Question

为什么{3}}在谷歌浏览器中看起来与Mozilla Firefox不同？

示例：

Chrome中的菜单较高/较小

这是我的代码：

的header.php

       <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/style.css" />

        <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,300italic' rel='stylesheet' type='text/css' />

    </head>
    <body>
        <div id="wrapper">
            <div id="nav">
                <nav>
                    <ul class="menu-hover">
                        <li> <a href="index.php"> Home </a> </li>
                        <li>
                            <a href="downloads.php" id="dd"> Downloads </a>
                            <ul>
                                <li><a href="paddis-skypetools.php">Paddis SkypeTools</a></li>
                                <li><a href="greatzip.php">GreatZip</a></a></li>
                                <li><a href="pczip-cleaner.php">Pc Zip Cleaner</a></a></li>
                            </ul>
                        </li>
                        <li> <a href="forums.php"> Forums </a></li>
                        <li> <a href="youtube.php"> YouTube </a> </li>
                        <li>
                            <a href="contact.php"> Contact </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </body>
    </html>

的style.css

body {
    font-family: 'Source Sans Pro';
}

#wrapper {
    width:100%;
    background-color:white;
    margin:auto;
}

#top {
    width:100%;
    height:60px;
    border-style: solid;
    border-width: 1px;
}

#logo {
    clear:left;
    border-style: solid;
    border-width: 1px;
    width:30%;
    float:left;
    height:60px;
}

#nav {
    clear:right;
    width: 100%;
    border-width: 0px;
    float:right;
    height:60px;
}

#content
{
    width:97.9%;
    min-height:400px;
    border-style: solid;
    border-width: 1px;
    padding:20px;
}

#footer {
    height:100px;

}

.divider1 {
   display: block;
   float: left;
   padding: 0;
   margin: 8px auto;
   height: 0;
   width: 90%;
   max-height: 0;
   font-size: 1px;
   line-height: 0;
   clear: both;
   border: none;
   border-top: 1px solid #aaaaaa;
   border-bottom: 1px solid #ffffff;
}

.bp {
    width: 60%;
}

/* Navigation Menu
---------------------------------*/


    ul ul {
        display: none;
        background: #00B6ED;
    }

    ul li:hover > ul {
        display: block;
    }

    ul {
        background: #00B6ED;
        border-radius: 2px;
        list-style: none;
        position: relative;
        margin-top: -25px;
        margin-left: -8px;
    }

        ul:after {
            content: "";
            clear: both;
            display: block;
        }

        ul li {
            float: left;
        }

            ul li:hover {
                background: #404040;
            }

                ul li:hover a {
                    color: #fff;
                }

            ul li a {
                display: block;
                padding: 8px 5px;
                color: #FFF;
                text-decoration: none;
                height: 25px;
                font-size: 20px;
                margin: 10px;
                margin-top: 5px;
            }

        ul ul { /* Hover menu */
            background: #6B6B6B;
            border-radius: 0px;
            padding: 0;
            position: absolute;
            top: 100%;
            margin-top: 0px;
            margin-left: 0px;
        }

            ul ul li {
                float: none;
                border-top: 1px solid #6B6B6B;
                position: relative;
            }

                ul ul li a {
                    color: #fff;
                    height: 30px;
                    margin-bottom: 0px;
                }

                    ul ul li a:hover {
                        background: #404040;
                        height: 30px;
                        margin-bottom: 0px;
                    }

            ul ul ul {
                position: absolute;
                left: 100%;
                height: 35px;
                top: 0;
            }

    .js-enabled ul li:hover > ul {
        display: none;
    }

    .menu-hover {
        margin-left: -8px;
        width: 100%;
        margin-top: -36px;
    }

Answer 1

这是因为您还没有使用reset.css。 CSS重置会重置所有浏览器样式，最好的是Eric Meyer的CSS Reset。重置样式表的目标是减少浏览器在默认行高，边距和标题字体大小等方面的不一致性。

上述重置的内容为：

/* 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;
}

或者，如果您想要简单的重置，您可以这样做：

* {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    list-style: none;
}

Answer 2

它看起来不同，因为每个浏览器都定义了自己的CSS样式。当没有其他CSS内联定义或来自外部CSS文件时，此样式适用于HTML标记。这就是许多网站使用＆＃34; Reset.css＆＃34;。

的原因。

网站在不同的浏览器中呈现不同

2 个答案: