php - 在 Chrome 中居中 - 在 Firefox 中位于左侧

Question

在花了很长时间之后，我一直在设计我的网站，重新学习 CSS，基本上是通过尽可能少地使用 HTML/PHP 来创建一个网站(与 WordPress 集成)，并尝试设计它所有这些都来自模板主题为我设置的 CSS 和可用的 CLASS 和 ID。 (空白主题)

自始至终它在 Chrome 中都运行良好。我决定在我走得太远之前在 Firefox 上查看它。 Firefox 决定一切都应该被压到左边，而在 Chrome 中，网站看起来完美居中并且与我尝试在 CSS 中做的事情相匹配。

我试图将 WRAPPER、Body 甚至 HTML 都对齐到整个页面的中心，但 Firefox 拒绝这样做。我在右侧的固定侧边栏应该与 Chrome 中的主要内容隔开(除非你增加整个页面的大小，然后它会重叠。)在 Firefox 中，它甚至不会尝试去尽可能靠右，它只会与其他所有东西挤在一起。

如果侧边栏中的文本太长，我还想使用省略号将其截断，但它无法正常工作。它要么切断文本但不替换省略号，要么超出页面。

下面是我想要的结构:

http://www.icesage.com/i/site2.png

这是我正在使用的 CSS。至于 PHP/HTML 结构，你需要去实际的网站本身，因为这里有太多无法显示。 (同样，它是 WordPress，并使用主题 Blankslate 作为起点。)

body {
background-color: black;
background-repeat:no-repeat; 
background-attachment:fixed; 
background-size: 110%;
line-height: 20px;
text-size: 10px;
font-family: Verdana;
}


#site-title {
    position:relative;
    top:0px;
    margin: 0 auto;
    width: 10%;
    display:none;
}

/* #header {
    position:relative;
    top:0px;
    margin: 0 auto;
    width: 40%;
} */

#footer {
    position: relative;
    float: right;
    bottom: 0;
    margin: 2% auto;
    right: 25%;
    width: 50%;
    height: 10px;   /* Height of the footer */
    background-color:rgba(0,0,0,0.7); 
border-radius: 10px; 
box-shadow: 5px 0px 4px 0px #1c6191; 
    color: white;
    text-align: center:
    padding-top: 5px;
    padding-bottom: 9px;
    padding-right: 5px;
    padding-left: 5px;
    display: inline
}

#copyright {
text-align: center;
}

/* Top Navigation */

#menu {
margin: 0 auto;
}

#menu a {
    float: left;
    color: white;
    display: block;
    height: 40px;
    line-height: 40px;
    text-decoration: none;
    text-align: center;
    margin-right: 10px;
    border-left-style: solid;
    border-width: 1px;
    border-color: #1c6191;
    background-color:rgba(0,0,0,0.9); 
    border-radius: 10px; 
    box-shadow: 4px 0px 2px 3px #1c6191; 
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 15px;
    padding-left: 15px;

}



#menu a:hover {

    background-color: blue;

}

.entry-title {
font-size: large;
width:60%;
text-shadow: 2px 0.5px #1c6191;
background-color:rgba(0,0,0,0.7); 
border-radius: 20px; 
box-shadow: 5px 0px 4px 0px #1c6191; 
color: white;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 5px;
padding-left: 5px;
margin: 2px
}

/* h1 .entry-title {
display: none;
font-size: 50px;
}

h2 .entry-title {
display:none;
font-size: 50px;
}

h3 .entry-title {
font-size: 50px;
text-shadow: 2px 0.5px #1c6191;
}

h3 .widget-title {
font-size: 50px;
text-shadow: 2px 0.5px #1c6191;
}
*/

.cat-links {
display:none;
}


/* Main Content Post (Entry) */

.post {
width: 70%; 
background-color:rgba(0,0,0,0.9); 
border-radius: 20px; 
box-shadow: 5px 0px 4px 0px #1c6191; 
color: white;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
margin: 30px;
margin-left: 5px;
}

img.alignright {float:right; margin:20px 10 10em 10em; background-color: royalblue; border: 1px;}
img.alignleft {float:left; margin:20px 10em 2em 2em;}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}

.alignright {float:right; text-align:center; padding-left: 20px;}
.alignleft {float:left; }
.aligncenter {display: block; margin-left: auto; margin-right: auto}

.wp-caption-text {
font-size: small;
font-style:italic;
text-align:center;
}


.post-edit-link  {
    float: left;
    color: white;
    position: relative;
    display: block;
    height: 40px;
    line-height: 40px;
    text-decoration: none;
    text-align: center;
    margin-right: 10px;
    border-left-style: solid;
    border-width: 1px;
    border-color: #1c6191;
    background-color:rgba(0,0,0,0.9); 
    border-radius: 10px; 
    box-shadow: 4px 0px 2px 3px #1c6191; 
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 15px;
    padding-left: 15px;
    }

.post-edit-link:hover {
    background-color: blue;
}

.comments-link  {
    float: right;
    color: white;
    display: block;
    position: relative;
    height: 40px;
    line-height: 40px;
    text-decoration: none;
    text-align: center;
    margin-right: 10px;
    border-left-style: solid;
    border-width: 1px;
    border-color: #1c6191;
    background-color:rgba(0,0,0,0.9); 
    border-radius: 10px; 
    box-shadow: 4px 0px 2px 3px #1c6191; 
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 15px;
    padding-left: 15px;
    }

.comments-link:hover {
    background-color: blue;
}

.type-page {
width: 70%; 
float: left;
background-color:rgba(0,0,0,0.9); 
border-radius: 20px; 
box-shadow: 5px 0px 4px 0px #1c6191; 
color: white;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
margin: 40px
overflow: auto;
}

.nav-previous {
display: none;
}

.comments {
width: 70%; 
float: left;
background-color:rgba(0,0,0,0.9); 
border-radius: 20px; 
box-shadow: 5px 0px 4px 0px #1c6191; 
color: white;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
margin: 20px
}

.comment {
width: 70%; 
float: left;
background-color:rgba(0,0,0,0.9); 
border-radius: 20px; 
box-shadow: 5px 0px 4px 0px #1c6191; 
color: white;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
margin: 20px
}

#header {
width: 60%; 
margin: 0 auto;
background-color:rgba(0,0,0,0.7); 
border-radius: 20px; 
box-shadow: 5px 0px 4px 0px #1c6191; 
color: white;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
margin-bottom: 40px;
}

#titlebanner {
margin: 0 auto;
}

.meta-sep {
display: none;
}

html {
zoom: .8; 
-moz-transform: scale(0.8); 
-moz-transform-origin: 0 0;
margin: 20px auto;
}

.comment-respond {
color: white;
width: 60%; 
float: left;
background-color:rgba(0,0,0,0.7); 
border-radius: 20px; 
margin: 0 auto; 
box-shadow: 5px 0px 4px 0px #1c6191; 
font-color: white;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
}

.entry-date {
color: royalblue;
}

#wrapper {
-moz-margin-start: -40px auto;
margin-right: 0 auto;
}


/* Sidebar */

.widget-area {
    position: fixed;
    top: 225px;
    z-index: 1;
    right: 0.5%;
    text-shadow: 2px 2px #1c6191;
    width: 300px; 
    float:left;
    border-left-style: solid;
    border-width: 1px;
    border-color: #1c6191;
    background-color:rgba(0,0,0,0.9); 
    border-radius: 10px; 
    box-shadow: 4px 0px 2px 3px #1c6191; 
    color: white;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 0px;
    padding-left: 0px;
    margin-right: inherit;
}



.xoxo {
display:block;
padding-top: 2px;
padding-bottom: 2px;
padding-right: 2px;
padding-left: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: clip
text-overflow: ellipsis
text-overflow: "…"

}



#searchsubmit {
display:none;
}


.searchform  .screen-reader-text {
   display:none;
}

.xoxo .screen-reader-text {
   display:none;
}

.entry-content {
width: 90%;
color: white;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 25px;
padding-left: 25px;
text-align:justify;
/* text-shadow: 2px 0.5px #1c6191; */
}

P {
color: white;
}

#search {
display:none
}

#site-description {
display:none
}

A {
text-decoration: none;
font-family:Verdana; 
}

A:link {
text-decoration: none;
color:#04CCFD; 
font-family:Verdana;
}

A:visited {
text-decoration: none; 
color:#04CCFD;
font-family:Verdana;
}

A:active {text-decoration: none; 
color:#04CCFD; 

}

A:hover {
text-decoration: none; 
color:white; 
} 

li .widget-container {
font-color: white;
}

/* Sub-Menu Test */



/* End Sub-Menu Test */

video{font-size:100%;font:inherit;padding:0;border:0;margin:0;vertical-align:baseline}
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}
section{display:block}
.clear{clear:both}
.sticky{}
.bypostauthor{}
.wp-caption{}
.wp-caption-text{}
.gallery-caption{}
.alignright{}
.alignleft{}
.aligncenter{}

网站:http://www.icesage.com或者您可以查看“Blankslate”。

任何有助于找出我做错了什么或指出一些草率代码的帮助将不胜感激，但这篇文章的主要问题是:

如何在所有浏览器(尤其是 Firefox)中正确地包含包装器中的所有内容并使整个站点(包括侧边栏)居中，就像它在 Chrome 中的显示方式一样？ (此外，某些布局是意外完成的，例如 Comment 和 TopNav 按钮稍微偏离了之前的区域。我想保留它，但我不确定如何正确地保留它。)

我进行了彻底搜索，所提供的答案不断告诉我要使用的适当 CSS，但我一直在使用它，但无济于事。其他问题根本没有答案。

如有任何帮助，我们将不胜感激!

Answer 1

问题出在您对 firefox 浏览器使用 transform-origin 的方式。看下面的类

 html {
 zoom: .8; 
 -moz-transform: scale(0.8); 
 -moz-transform-origin: 0 0;
  margin: 20px auto;
  }

正如您提到的 origin 属性的“0 0”。第一个值是水平位置，第二个值是垂直位置。所以它对齐到左侧和顶部位置。如果你想水平居中页面，那么你需要给出“center, top”或者“50%,0”。像下面这样更新您的 CSS。

 html {
 zoom: .8; 
 -moz-transform: scale(0.8); 
 -moz-transform-origin:50% 0;
  margin: 20px auto;
  }

OP 在评论框中提出的其他问题:你知道为什么侧边栏仍然压缩并与左侧的内容重叠，而在 Chrome 中却没有这样做吗？

出现此问题是因为 chrome 和 firefox 的默认行为。看下面的类。

  .post {
   width: 70%; 
   background-color:rgba(0,0,0,0.9); 
   border-radius: 20px; 
   box-shadow: 5px 0px 4px 0px #1c6191; 
   color: white;
   padding-top: 25px;
   padding-bottom: 25px;
   padding-right: 50px;
   padding-left: 50px;
   margin: 30px;
   margin-left: 5px;
  }

box-sizing:border-box 和 firefox 的默认 chrome 属性是 box-sizing:content-box。这是导致问题的原因。 Check what is the difference between these to here

因此强制 firefox 使用 border-box 属性来调整框的大小。像下面这样更新 CSS。

   .post {
   width: 70%; 
   background-color:rgba(0,0,0,0.9); 
   border-radius: 20px; 
   box-shadow: 5px 0px 4px 0px #1c6191; 
   color: white;
   padding-top: 25px;
   padding-bottom: 25px;
   padding-right: 50px;
   padding-left: 50px;
   margin: 30px;
   margin-left: 5px;
   -moz-box-sizing:border-box;
  }