CSS 浮动 Chrome 与 Firefox答案

【问题标题】：CSS float Chrome vs FirefoxCSS 浮动 Chrome 与 Firefox
【发布时间】：2012-12-01 02:31:31
【问题描述】：

我最近购买了一个 wordpress 主题，但遇到了一个似乎无法解决的 CSS 问题。不幸的是，主题制作者不再提供支持，所以我希望你们中的一个可以在这里帮助我：D

如果您查看此网站：

demo.shakenandstirredweb.com/shaken-grid/

在 Google Chrome 中，您会看到标题向左浮动。不错！

但是，如果您在 Firefox 中查看该站点，您会发现标题不会向左浮动，而是停留在中间位置。我一直在搞乱 id 和 classes 标头、包装和站点信息，但我似乎无法让 Firefox 标头像 Chrome 一样浮动到左侧。

铬

header根据body中的内容向左浮动。

火狐

标题仍然在中间。

有什么建议吗？

感谢您抽出宝贵时间阅读本文！

编辑：好的，我发现它是 div 类 wrap。在 Firefox 中，最大宽度“卡在”1300px，而 Chrome 会自动扩展宽度。奇怪的是，样式表中.wrap 的宽度设置为1010px，边距自动。有人知道我该怎么做吗？

编辑：好的，我认为这与javascript有关。我猜这个功能不适用于 Firefox：

function centerLayout(){
    if( jQuery(window).width() > mobile_width ){
        jQuery('#header .wrap, #footer .wrap, #filtering-nav, .navigation').css('width', jQuery('.isotope').width() - 10);
    }
}

有什么建议吗？

【问题讨论】：

在 chrome 和 firefox 中对我来说看起来一样：S 这是一个响应式主题，两个浏览器的分辨率相同吗？也许您正在不同的屏幕上观看它们，或者使用不同的窗口大小...
感谢收看！我使用相同的分辨率、窗口大小和屏幕来查看该站点。我认为徽标 + 导航在 IE 中也不会向左浮动（至少是旧版本）。
Chrome d.pr/i/YbPH header 根据 body 中的内容向左浮动。 Firefox d.pr/i/hrTI 标题仍然在中间。

标签： javascript css firefox google-chrome

【解决方案1】：

这应该可以解决它：

将此添加到您的样式表中：

#grid {
  margin: auto;
  width: 1050px;
}

【讨论】：

id="grid" 的 div 没有应用任何样式。所以它影响了以内容为中心的 div
我不知道这是否是您问题的答案..当我在Firefox中访问您的网站时，中间的内容都向左浮动（与Chrome完全不同）
感谢您的回复！不幸的是，它没有帮助.. 可以肯定的是，我想将徽标 + 导航移到左侧（就像在 Chrome 中一样）。不是中间的盒子。感谢您的宝贵时间！

【解决方案2】：

试着像这样做

例如，我在这里放了 3 列，但要确保它在所有浏览器中都能正常工作

-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3; /*normal att*/

用 -moz- 做一次，用 -webkit- 做一次，然后不做

某些属性并非所有浏览器都能理解，因此您需要添加浏览器使用的套件名称就像示例中的多列并不总是受支持，所以我需要添加套件名称

我想使用的属性是“column-count”，我照常编写，为了确保它在所有其他浏览器中都能完美运行，我在属性名称前添加了“-kit name-”

希望我这次解释清楚=]

【讨论】：

感谢您的回复！您能否更具体一点，我应该在哪里放置代码？谢谢！
好的，如果我理解正确的话，我应该使用 -moz- 和 -webkit- 作为 float 属性。我会试试的，谢谢。
为什么firefox和chrome的背景颜色不一样？？

【解决方案3】：

尝试做类似的事情

CSS

#header {
  overflow: hidden;
}

#header > .wrap {
  float: left;
  width: 100%;
}

function centerLayout(){
  if(jQuery(window).width() > mobile_width ){
    newWidth = jQuery('.isotope').width() - 10;
    jQuery('#header .wrap, #footer .wrap, #filtering-nav, .navigation').css('width',newWidth);
  }
}
jQuery(document).ready(centerLayout);

【讨论】：