Safari 中的 CSS 错误,但 Chrome/Firefox 中没有

标签 css html twitter-bootstrap

https://gist.github.com/2354116

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

如果在 Safari 中查看,那么这三个 div 根本不会居中:/

我不确定这是为什么......任何人都可以帮忙吗?

最佳答案

注意:必须对您的设计进行大量假设,因此请修改任何不符合您原始设计的内容。

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

你的内容容器是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 样式表是徒劳的,它目前对您的情况没有多大作用,那么为什么还要使用它呢?您可以轻松修改一些媒体查询以支持我的固定版本,但您的版本根本不起作用,因为您声明了所有具有自定义宽度的类,因此没有必要包含它。

关于Safari 中的 CSS 错误,但 Chrome/Firefox 中没有,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10095146/

相关文章:

jquery - Bootstrap 词缀重置附加元素?

css - 如何根据其子节点自动调整父节点的大小

php - 链接图像而不考虑文件类型

html - 移动设备的引导菜单不起作用

html - JSF/小面 : CSS file is not being recognized using <h:outputStylesheet> tag

javascript - href 不适用于下拉切换 - bootstrap

html - 为什么框架集没有加载到页面中?

javascript - 在不将高度设置为自动的情况下获取元素的自动高度

javascript - 在 CSS 中将图标设置为光标指针

css - Bootstrap 导航栏在滚动时在移动设备上隐藏了一半