CSS浮动Chrome与Firefox

Question

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

如果您查看此网站：

demo.shakenandstirredweb.com/shaken-grid/

在谷歌浏览器中，您会看到标题浮动到左侧。尼斯！

但是，如果您在Firefox中查看该网站，您会看到标题不会浮动到左侧，而是保持在中间位置。我一直在搞乱id和类头，wrap和site-info，但我似乎无法让Firefox标题像Chrome一样向左浮动。

铬

标题根据正文中的内容浮动到左侧。

火狐

标题仍然在中间。

有什么建议吗？

感谢您花时间阅读本文！

编辑： 好的，我已经发现它是div类wrap。在Firefox中，1300px上的最大宽度“卡住”，而Chrome会自动扩展宽度。 奇怪的是，样式表中.wrap的宽度设置在1010px，margin auto。 谁知道我应该做什么？

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

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

任何提示？

Answer 1

这应该解决它：

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

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

Answer 2

尝试像

那样做

例如，我在这里放了3列，但要确保它适用于所有浏览器

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

使用-moz-执行一次，使用-webkit-执行另一次执行

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

我想要使用的属性是“列数”我像往常一样写，并确保它在所有其他浏览器中完美运行我在属性名称之前添加“-kit name-”

希望我这次解释得很好=]

Answer 3

尝试做类似

的事情

CSS

#header {
  overflow: hidden;
}

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

JS

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);