Safari 中的 CSS 错误，但 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 类的宽度。

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

现在回到您原来的问题，底部的 .paraWrapper div 没有正确堆叠，因为您在容器中设置了宽度 870px 并且其中的元素没有添加达到那个宽度:

span3 + span3 + span2 + margin = 640px

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

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

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