CSS 错误在 Safari 但不是 Chrome/Firefox

Question

https://gist.github.com/2354116

如果您在 Chrome/Firefox 中查看上述页面，那么一切似乎都很好。 底部的 div（两个标题和社交图标）包裹在一个容器 div 和中心，没有问题。

如果它在 Safari 中查看，那么这三个 div 根本不居中：/

我不确定这是为什么……有人可以帮忙吗？

Answer 1

注意：必须对您的设计进行很多假设，因此请修改任何不适合您原始设计的内容。

首先，您没有正确包含您的页面元素（内容、旋转木马、页脚），您目前有多个宽度的容器试图并排放置，这在多个地方破坏了您的设计。

你的内容容器是width:940px ，你的.wrapper div 是width:750px ，你的.paramWrapper div 是width:870px ，你的.carousel div 是width:735px 。 您必须选择一个宽度并坚持使用它，然后使用边距将内容相应地推送到您的页面上。 我使用860px ，这是span11 class 的宽度。

接下来，您将直接修改bootstrap.css样式表，这意味着每当 bootstrap 更新时，如果您覆盖 bootstrap 样式表，您的所有更改都将丢失，因此创建另一个样式表并将所有自定义 styles 放在那里，只是在 header 中的引导样式表“之后”加载它。

现在回到您原来的问题，底部的.paraWrapper div 没有正确堆叠，因为您在容器中设置了870px的宽度，并且其中的元素加起来不等于该宽度：

span3 + span3 + span2 + 边距 = 640px

所以这不是问题或错误，只是您的布局。

这是我很快提出的固定版本，因此您将不得不再次修改元素以适合您的设计： http://jsfiddle.net/rzSFa/3/ ，这是它的外观演示像。

顺便说一句，您使用响应式引导程序样式表是徒劳的，它目前在您的情况下并没有做太多，所以为什么还要使用它呢？ 您可以轻松修改一些媒体查询以支持我的固定版本，但您的版本根本不起作用，因为您声明了所有具有自定义宽度的类，因此没有必要包含它。