我的網站的標題在Chrome和Firefox上表現不同？

爲什麼我的網站的標題在Chrome和Firefox上表現不一樣？我的網站的標題在Chrome和Firefox上表現不同？

在我的主頁上，標題與背景齊平，但在其他頁面上，它看起來像chrome從頂部調用額外的邊距或填充。

在Firefox中，一切都是一樣的。如果我更改了標題的頂部邊距，它會修復Firefox上的所有頁面。如果我在Chrome中執行此操作，則只能在主頁上執行此操作，但這不正確。在Chrome瀏覽器中，除了home之外，其他所有頁面都很好。我試圖避免使用兩個css文件。

Google Chrome瀏覽器首頁 http://i.imgur.com/tMiP4Dj.png

FireFox的每一頁& 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"); 
}

來源

2014-06-20 Sh0ck

你能提供一些代碼示例顯示哪裏喲你有問題嗎？ – daniula

嘗試增加以div.header： position: absolute; left: 0; right: 0; top: 13px;

而且在div.bar改變： margin-top: 32px;

來源

2014-06-20 21:13:39 jtheletter

我提出了你的建議調整。現在它的谷歌瀏覽器在WordPress的循環正在運行，但不是在Firefox或所有其他網頁的主頁上的確定。 Chrome上的首頁頭部似乎需要保證金：14px;但在Firefox和其他鉻頁邊距頁頂：10px; – Sh0ck

將'top：122px;'添加到'div.navigation'和'div.main'。 – jtheletter

這絕對解決了這個問題。你是如何排除故障的？ – Sh0ck

嘗試改變：

<body class='homepage'>

到

<body class='single'>

您的主頁上有class爲single上的其他網頁，但homepage

來源

2014-06-20 20:50:23 imbondbaby

我添加了一些PHP來嘗試使它成爲當時的主頁。這個身體類不是問題。就是我的故障排除 – Sh0ck

問題仍然存在嗎？ – imbondbaby

我的網站的標題在Chrome和Firefox上表現不同？

回答

相關問題