Html 引导主题在不同的浏览器中具有不同的边距

我正在使用xeon引导模板（）。Mac上的Firefox会将边距渲染到靠近窗口边缘的位置。Safari使用大小完全相同的窗口，将边距渲染得更宽

两个问题：为什么会这样？如何将引导配置为跨浏览器更一致

---

谢谢。

我没有Mac电脑，所以我无法验证我的建议。屏幕截图或页面链接可能会有所帮助。这里没有太多的内容，因此没有答案，但我会尝试一下

我假设问题出在浏览器上，而不是引导程序或某种尚未完全理解的差异感知

你说的“大小完全一样”是什么意思？两种浏览器都最大化了吗？您是否手动重新调整它们的大小，使顶部、右侧、底部和左侧边缘对齐？如果是，这并不意味着视口大小相同。每个浏览器都有自己的chrome、UI元素（滚动条）等，这些元素的大小可能不同，并且会影响视口大小

.container

元素的边距设置为

auto

，浏览器会自动为设置宽度的元素（如

.container

）计算边距。Bootstrap的

.container

类为各种视口大小指定了宽度。您可能正在以非常接近断点的视口宽度查看页面，并且一个浏览器中的右滚动条（或类似的东西）比另一个浏览器中的稍小/稍大。这反过来可能会触发页面以不同的宽度呈现，从而显示不同的页边距

例如：

引导程序在992px处有一个断点

• 如果Firefox中的视口宽度为995px，则引导程序将以970px的速度渲染

  .container

• 如果Safari中的视口宽度为990px，则引导将以750px渲染

  .container

基于这是一个断点问题的建议，我将找出每个浏览器的视口宽度到底是多少。然后确保将它们设置为相同的宽度。如果您得到相同的结果/问题，那么您将知道它不是断点

补充信息会有所帮助

---

希望这为您指明了正确的方向。

您是在谈论

.container

元素的边距吗？我想是的。如果你看一下我为Safari和Firefox提供的两个链接，你会发现Safari的左右两侧有更多的边距或填充。这些元素似乎位于容器div中，但我不确定它们的呈现方式为何会如此不同。Firefox 35.0.1和Safari 5.1.7似乎具有相同的页面宽度和侧边距。谢谢，可能就是这样。以下是我在Safari中看到的内容：以下是我在Firefox中看到的内容：。正如你所看到的，Firefox显示了更多的内容。很可能，我在Safari屏幕截图的标题/滑块下方看到了两列，在Firefox屏幕截图中看到了三列。如果你认为这是正确的答案，请接受它。