我的网站标题在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");
}
2540625

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

并在div.bar上进行更改: margin-top: 32px;

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

我的网站标题在Chrome和Firefox上的显示方式有所不同?

来自分类Dev

网站在Firefox,Internet Explorer和Google Chrome上的显示方式有所不同

来自分类Dev

SVG在Chrome和Firefox上的显示方式有所不同

来自分类Dev

离子,副标题在Safari和iOS中的呈现方式有所不同

来自分类Dev

离子,副标题在Safari和iOS中的呈现方式有所不同

来自分类Dev

网站在Ipad / Iphone模拟器和真实设备上的显示方式有所不同

来自分类Dev

为什么此PNG图像在Chrome和Firefox上呈现的方式有所不同?

来自分类Dev

css3转换在safari和chrome上的显示方式有所不同

来自分类Dev

Bootstrap选择在Firefox和Chrome中呈现的方式有所不同

来自分类Dev

Flexbox div在Chrome和Firefox中的拉伸方式有所不同

来自分类Dev

按钮在Firefox OS模拟器上的显示方式有所不同

来自分类Dev

文本框在IE和Chrome上的呈现方式有所不同

来自分类Dev

情节提要+ UIcollectionView:UI在iOS Simulator和设备上的显示方式有所不同

来自分类Dev

动作栏在android 2.2和android 5.0上的显示方式有所不同

来自分类Dev

当没有滚动条时,为什么我的网站在移动设备上的显示方式有所不同

来自分类Dev

当没有滚动条时,为什么我的网站在移动设备上的显示方式有所不同

来自分类Dev

PDF文档文本在IE / Firefox / Chrome浏览器中的显示方式有所不同

来自分类Dev

带有边框折叠的表格在Chrome和Firefox中的工作方式有所不同

来自分类Dev

为什么在Firefox,Chrome和IE中,这种方法的工作方式有所不同?

来自分类Dev

Google Web字体在移动Safari和台式机Chrome上的呈现方式有所不同吗?

来自分类Dev

Chrome和其他操作系统上的“ Open Sans”渲染方式有所不同

来自分类Dev

嵌套的样式化跨度在Chrome / Firefox中呈现的方式有所不同:错误或功能?

来自分类Dev

页边空白在ff中的显示方式有所不同,例如chrome,opera

来自分类Dev

Twitter Bootstrap:IE和Firefox中的图标呈现方式有所不同

来自分类Dev

与Chrome相比,Flexbox在Safari上的工作方式有所不同

来自分类Dev

CSS在Chrome和IE 8中的工作方式有所不同

来自分类Dev

按钮的HTML颜色在移动设备上的显示方式有所不同

来自分类Dev

SSL证书在digicert上的显示方式有所不同

来自分类Dev

媒体查询在iPhone上的显示方式有所不同

Related 相关文章

  1. 1

    我的网站标题在Chrome和Firefox上的显示方式有所不同?

  2. 2

    网站在Firefox,Internet Explorer和Google Chrome上的显示方式有所不同

  3. 3

    SVG在Chrome和Firefox上的显示方式有所不同

  4. 4

    离子,副标题在Safari和iOS中的呈现方式有所不同

  5. 5

    离子,副标题在Safari和iOS中的呈现方式有所不同

  6. 6

    网站在Ipad / Iphone模拟器和真实设备上的显示方式有所不同

  7. 7

    为什么此PNG图像在Chrome和Firefox上呈现的方式有所不同?

  8. 8

    css3转换在safari和chrome上的显示方式有所不同

  9. 9

    Bootstrap选择在Firefox和Chrome中呈现的方式有所不同

  10. 10

    Flexbox div在Chrome和Firefox中的拉伸方式有所不同

  11. 11

    按钮在Firefox OS模拟器上的显示方式有所不同

  12. 12

    文本框在IE和Chrome上的呈现方式有所不同

  13. 13

    情节提要+ UIcollectionView:UI在iOS Simulator和设备上的显示方式有所不同

  14. 14

    动作栏在android 2.2和android 5.0上的显示方式有所不同

  15. 15

    当没有滚动条时,为什么我的网站在移动设备上的显示方式有所不同

  16. 16

    当没有滚动条时,为什么我的网站在移动设备上的显示方式有所不同

  17. 17

    PDF文档文本在IE / Firefox / Chrome浏览器中的显示方式有所不同

  18. 18

    带有边框折叠的表格在Chrome和Firefox中的工作方式有所不同

  19. 19

    为什么在Firefox,Chrome和IE中,这种方法的工作方式有所不同?

  20. 20

    Google Web字体在移动Safari和台式机Chrome上的呈现方式有所不同吗?

  21. 21

    Chrome和其他操作系统上的“ Open Sans”渲染方式有所不同

  22. 22

    嵌套的样式化跨度在Chrome / Firefox中呈现的方式有所不同:错误或功能?

  23. 23

    页边空白在ff中的显示方式有所不同,例如chrome,opera

  24. 24

    Twitter Bootstrap:IE和Firefox中的图标呈现方式有所不同

  25. 25

    与Chrome相比,Flexbox在Safari上的工作方式有所不同

  26. 26

    CSS在Chrome和IE 8中的工作方式有所不同

  27. 27

    按钮的HTML颜色在移动设备上的显示方式有所不同

  28. 28

    SSL证书在digicert上的显示方式有所不同

  29. 29

    媒体查询在iPhone上的显示方式有所不同

热门标签

归档