Question

为什么我的网站标题在Chrome和Firefox上表现不同？

在我的主页上，标题与背景齐平，但在其他页面上，似乎chrome会从顶部调用额外的边距或填充。

在Firefox中，一切都是一样的。如果我对标题的上边距进行更改，则会修复Firefox上的所有页面。如果我这样做，那么在Chrome中，只在主页上，这是不正确的。在Chrome中，所有其他页面都很好，除了主页。我试图避免使用两个css文件。

GOOGLE CHROME主页 http://i.imgur.com/tMiP4Dj.png

FireFox Every Page＆amp; GOOGLE CHROME所有其他页面 http://i.imgur.com/QZQBpbE.png

/* CSS */



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 {
      border: 0px none;
      font: inherit;
      margin: 0px;
      padding: 0px;
      vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
     display: block;
}

body {
     line-height: 1;
}

body.single div.post-item p {
     font-style: normal;
}

ol, ul {
     list-style: none outside none;
}

blockquote, q {
     quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
     content: none;
}

table {
     border-collapse: collapse;
     border-spacing: 0px;
}

body {
     background: url("img/header.png") repeat-x scroll center top / 100% 216px #e9e9e9;
}

.logo {
     float: left;
     height: 125px;
     margin-top: 25px;
     max-width: 569px;
     overflow: hidden;
     width: 100%;
}

.bar {
     display: inline-block;
     height: 90px;
     margin-left: 21px;
     margin-top: 32px;
     width: 540px;
}

.navigation {
     background-color: #ffa300;
     background-image: url("img/topnav.png");
     background-repeat: repeat-x;
     font-family: 'Montserrat',sans-serif;
     height: 60px;
     margin-top: 29px;
     max-width: 1130px;
     position: absolute;
     width: 1130px;
}

.header {
     margin: 0px auto;
     position: absolute; 
     left: 0; 
     right: 0;
     top: 13px;
     width: 1130px;
}

.social {
     float: left;
     margin-left: 860px;
     margin-top: -40px;
}

.social ul {
     overflow: hidden;
     position: absolute;
}

.social ul li {
     float: left;
     font-size: 22px;
     margin-top: 12px;
     padding-right: 10px;
}

.topnav {
     margin-left: 15px;
}

.topnav ul {
     overflow: hidden;
}

.topnav ul li {
     float: left;
     font-size: 22px;
     margin-top: 12px;
     text-transform: uppercase;
}

.topnav ul li a {
     color: #363636;
     font-weight: bold;
     margin-top: 5px;
     text-decoration: none;
}

.topnav ul li a:visited {
     color: #363636;
     font-weight: bold;
     margin-top: 5px;
     text-decoration: none;
}

.topnav ul li a:hover {
     color: grey;
     font-weight: bold;
     margin-top: 5px;
     text-decoration: none;
}

.topnav ul li a:active {
     color: #ffa300;
     font-weight: bold;
     margin-top: 5px;
     text-decoration: none;
}

.topnav li + li:before {
     color: #d4d4d4;
     content: "|";
     margin-left: 10px;
     margin-right: 10px;
     padding: 0px;
}

.subnav {
     margin-left: 15px;
}

.subnav ul li {
     float: left;
     font-size: 16px;
     margin-top: 15px;
}

.subnav ul li a {
     color: #ffffff;
     font-weight: bold;
     text-decoration: none;
     visibility: hidden;
}

.subnav li + li:before {
     color: white;
     content: "-";
     font-weight: bold;
     margin-left: 5px;
     margin-right: 5px;
     padding: 0px;
     visibility: hidden;
}

.main {
     background-color: white;
     height: auto;
     margin: 80px auto 0px;
     position: absolute;
     width: 1130px;
}

.content {
     float: left;
     font-size: 12px;
     height: auto;
     margin: 15px;
     position: relative;
     width: 780px;
}

.titleh2 {
     padding-bottom: 5px;
     padding-top: 8px;
}

#sidebar {
     background: none repeat scroll 0% 0% transparent;
     float: left;
     height: 100%;
     margin-left: 4px;
     overflow: hidden;
     position: relative;
     top: 15px;
     width: 300px;
}

.Secondarybox2 {
     margin-bottom: 15px;
}

.Secondarybox2 h3 {
     background: url("img/topnav.png") repeat-x scroll 0% 0% #ffa300;
     border-color: lightgrey;
     border-style: solid;
     border-width: 1px;
     color: #363636;
     font-family: 'Montserrat',Arial;
     height: 30px;
     margin-bottom: 10px;
     padding-bottom: 10px;
     padding-left: 10px;
     padding-top: 10px;
}

.Secondarybox2 h3 p {
     font-size: 22px;
}

.Secondarybox2 ul {
     font-family: Arial,Helvetica,Times New Roman;
     font-size: 16px;
     padding-left: 10px;
}

.Secondarybox2 ul li:not(:first-of-type) {
     padding-top: 15px;
}

.Secondarybox2 ul li:last-child {
     padding-bottom: 15px;
}

.Secondarybox2 a {
     color: #363636;
     text-decoration: none;
}

.widget {
     border-color: lightgrey;
     border-style: solid;
     border-width: 1px;
     margin-bottom: 15px;
}

.widget h2 {
     background: url("img/topnav.png") repeat-x scroll 0% 0% #ffa300;
     color: #363636;
     font-family: 'Montserrat',Arial;
     height: 30px;
     margin-bottom: 10px;
     padding-bottom: 10px;
     padding-left: 10px;
     padding-top: 10px;
}

.widget h2 {
     font-size: 22px;
}

.widget ul {
     font-family: Arial,Helvetica,Times New Roman;
     font-size: 18px;
     padding-left: 10px;
}

.widget ul li:not(:first-of-type) {
     padding-top: 15px;
}

.widget ul li:last-child {
     padding-bottom: 15px;
}

.widget a {
     color: #363636;
     text-decoration: none;
}

.content .post-item {
     font-family: Arial;
     padding-bottom: 55px;
}

.content .post-item h2 a {
     color: black;
     font-size: 30px;
     text-decoration: none;
}

.more-link {
     background: none repeat scroll 0% 0% #ffa300;
     border: 5px none;
     color: white;
     float: left;
     font-size: 15px;
     font-weight: bold;
     margin-bottom: 10px;
     margin-left: 690px;
     margin-top: 15px;
     overflow: hidden;
     padding: 8px;
     text-decoration: none;
     width: 10%;
}

.numComments a {
     background: none repeat scroll 0% 0% #e1e1e1;
     border: 5px none;
     color: white;
     float: left;
     font-size: 15px;
     font-weight: bold;
     margin-left: 0px;
     margin-top: -43px;
     min-width: 120px;
     padding: 5px;
     text-align: center;
     text-decoration: none;
     width: 10%;
}

.meta {
     color: grey;
     font-size: 15px;
     margin-bottom: 10px;
     margin-top: -5px;
     overflow: hidden;
}

.content .post-item p {
     font-size: 16px;
     line-height: 25px;
     padding-top: 5px;
}

.tags a {
     color: #ffa300;
     font-size: 16px;
     text-decoration: none;
}

.tags a:visited {
     color: #363636;
     text-decoration: none;
}

.tags a:hover {
     color: grey;
     text-decoration: none;
}

.tags a:active {
     color: #ffa300;
     text-decoration: none;
}

.bar .border {
     border-color: #161616;
     border-style: solid;
     border-width: 3px;
     height: 84px;
     margin-top: -93px;
     position: absolute;
     width: 534px;
     z-index: 999999999;
}

.Secondarybox .streamstatus {
     clear: both;
}

.Secondarybox .streamtitleon {
     color: white;
     float: left;
     font-family: 'Montserrat',Arial;
     font-size: 58px;
     height: 50px;
     position: absolute;
     text-shadow: 3px 2px 1px #000000;
     width: 50px;
     z-index: 99999;
}

.Secondarybox .streamtitleoff {
     color: red;
     float: left;
     font-family: 'Montserrat',Arial;
     font-size: 58px;
     height: 50px;
     position: absolute;
     text-shadow: 3px 2px 1px #000000;
     width: 50px;
     z-index: 99999;
}

.Secondarybox .bgstream img {
     background: none repeat scroll 0% 0% red;
     clear: both;
     height: 300px;
     position: relative;
     width: 300px;
}
#morePrev a{
    background: url("img/topnav.png") repeat-x scroll 0 0 #ffa300;
    border-color: lightgrey;
    border-style: solid;
    border-width: 1px;
    color: #363636;
    font-family: 'Montserrat',Arial;
float:left;
    margin-top: 40px;
    padding: 10px;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  src: local("Montserrat-Bold"), url("http://themes.googleusercontent.com/static/fonts/montserrat/v4/IQHow_FEYlDC4Gzy_m8fcvEr6Hm6RMS0v1dtXsGir4g.ttf") format("truetype");
}

Answer 1

尝试添加到div.header： position: absolute; left: 0; right: 0; top: 13px;

在div.bar上更改： margin-top: 32px;

Answer 2

尝试更改：

<body class='homepage'>

到

<body class='single'>

您在其他网页上class为single，但主页上有homepage

我网站的标题在Chrome和Firefox上表现不同？

2 个答案: