Php 以Chrome为中心-在Firefox中位于左侧

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

这段时间，它一直在进行良好的铬。在我走得太远以至于无法在Firefox上查看它之前，我就决定了。Firefox决定一切都应该向左挤压，而在Chrome中，该站点看起来完全居中，并且与我在CSS中尝试做的事情相匹配

我试图将包装器、正文甚至HTML对齐，使整个页面居中，但Firefox拒绝这样做。我右边的固定侧边栏应该与Chrome中的主要内容隔开（除非你增加整个页面的大小，否则它会重叠。）在Firefox中，它甚至没有尽可能向右移动，它只是与其他内容一起挤压

我还想使用省略号来删除边栏中的文本，如果它太长，但是它不起作用。它要么剪掉文本，但不替换省略号，要么从页面上消失

下面是我想要的结构：

这是我正在使用的CSS。至于PHP/HTML结构，您需要转到实际的网站本身，因为这里要显示的内容太多了。（同样，它是WordPress，使用主题空白板作为起点。）

网站： 或者你可以看一看“白板”

如果有人能帮我找出我做错了什么或指出一些粗枝大叶的代码，我们将不胜感激，但这篇文章的主要问题是：

如何在包装器中正确地包含所有内容，并在所有浏览器（尤其是Firefox）中以整个站点为中心（包括侧边栏），就像它在Chrome中的显示一样？（此外，一些布局是意外完成的，比如注释和TopNav按钮出现在前一个区域之外。我想保留它，但我不确定如何正确地保持这种方式。）

我彻底地搜索了一遍，所提供的答案不断地告诉我应该使用什么样的CSS，而我一直在使用它，但毫无用处。其他问题根本没有答案

---

任何帮助都将不胜感激

该网站在Chrome中的外观与在Firefox中的外观完全相同。正因为如此：

margin-right: 0 auto;

这是

页边距右侧的无效属性。你想要

margin: 0 auto;

问题来自于您对firefox浏览器使用transform origin的方式。看下面这节课

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

正如您提到的“原点”属性的“0”。第一个值是水平位置，第二个值是垂直位置。因此，它与左侧和顶部位置对齐。如果你想水平居中的页面，那么你需要给“中心，顶部”或“50%，0”。更新你的CSS如下

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

   .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;
  }

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;
  }

框大小：边框框和firefox的默认chrome属性是框大小：内容框。这就是问题的根源

因此，强制firefox使用边框框属性来调整框大小。更新CSS，如下所示

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

   .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;
  }

非常感谢。很明显，我忽略了它，并认为0是出于某种原因居中的。我是这个网站的新手，所以不确定当你已经回答了我的问题时我是否应该问更多，但是你知道为什么侧边栏仍然浓缩并重叠左侧的内容，而Chrome却没有这样做吗？（除非，就像我说的，你增加页面缩放，然后它最终会重叠。）是不是我把它放得太小了？不管怎样，我有点不好意思忽视显而易见的事情。感谢您快速准确的回复！不客气。你可以就同一个问题进一步澄清。您可以编辑您的问题，并使用新的澄清更新您的问题：）确定。我也会用你的新问题更新我的答案。我已经用你的问题更新了我的答案。看看吧，如果你喜欢我的答案，投一票：）非常感谢。你的补充信息对我帮助很大！我不知道盒子的尺寸。我可能应该研究浏览器的特定功能。你帮了大忙！