以Chrome为中心-在Firefox的左侧

Question

经过很长时间，我一直在设计网站以重新学习CSS，并且基本上通过尽可能少地使用HTML / PHP来创建网站（与WordPress集成），并尝试从通过模板主题为我设置CSS以及可用的CLASS和ID。 （空白主题）

在整个过程中，Chrome一直运行良好。 我决定先决定在Firefox上进行检查。 Firefox决定将所有内容都压缩到左侧，而在Chrome中，该网站看起来完全居中，并且与我尝试在CSS中进行的操作匹配。

我试图将WRAPPER，Body甚至HTML对齐以使整个页面居中，但是Firefox拒绝这样做。 我右侧固定的边栏应该与Chrome中的主要内容隔开（除非您增加整个页面的大小，然后重叠）。在Firefox中，它甚至不尝试尽可能地将它与其他所有内容融合在一起。

我也想使用Ellipsis截断补充工具栏中的文本（如果太长），但是它拒绝工作。 它要么截断文本，但不替换省略号，要么跑出页面。

下面是我想要的结构：

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或您可以看看“空白板”。

弄清楚我在做什么错或指出一些草率的代码的任何帮助将不胜感激，但是这篇文章的主要问题是：

如何在包装程序中正确包含所有内容，并在所有浏览器（尤其是Firefox）中使整个网站（包括边栏）居中，如Chrome在Chrome中的显示方式？ （此外，某些布局是意外完成的，例如Comment＆TopNav按钮出现在先前区域的稍微偏远的位置。我想保留该位置，但不确定如何正确地保留它。）

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

任何帮助，将不胜感激！

Answer 1

该网站在Chrome中的外观与在Firefox中的外观完全相同。 因此，这里：

margin-right: 0 auto;

这是margin-right的无效属性。 你要

margin: 0 auto;

Answer 2

问题来自于您将转换源用于Firefox浏览器的方式。 看下面的课

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

正如您提到的原始属性“ 0 0”。 第一个值是水平位置，第二个值是垂直位置。 因此，它与左侧和顶部位置对齐。 如果要使页面水平居中，则需要给出“居中，居中”或“ 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。 这引起了问题。 检查这些与这里有什么区别

因此，强制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;
  }