Chrome破坏了flexbox布局，而Firefox则没有。

Question

我遇到了一个问题，Chrome在网站首页打破了flexbox CSS的布局，但是火狐浏览器没有。以下是HTML代码：

    <div class="intro_container">
    <div id="top_text1" class = "intro_items intro_item_1">
    ....
    </div>
    <div id="top_text2" class = "intro_items intro_item_1">
    ....
    </div>
    </div>

以及 CSS

    div.intro_container  {
      width: 100%;
      background:;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
    }
    div.intro_items  {
      background: white;
      border:  .1em solid #000093;
      margin: 0.5em;
      padding: 3%;
      flex:  1 0 40%;
    }

任何帮助都将不胜感激。

- RoyS

---

“Breaking”是什么意思？请描述具体的问题，并最好提供演示以重现该问题。 - Paulie_D

@Paulie_D 我的意思是在Chrome中，“intro_items”位于“intro_container”的外部和上方，而在Firefox中它们位于内部，正如人们所期望的那样。很抱歉我无法发布图片来展示差异，但请查看english2theworld.com的前端页面，在FF和Chrome中您会看到差异。感谢您的关注。 - RoyS

Answer 1

在我看来，问题不在于浏览器或flex属性的问题。

问题出现在以下的CSS样式中，

             div#top_text1 {margin-top: -3%;} 

在layout.css文件中的第325行

只需删除此CSS样式并检查它，它就会起作用...

- rajesh

Answer 2

我遇到了类似的问题...我的页面在IE、Firefox、Opera和Safari上都没有问题，但是现在在Chrome中DIV宽度“失效”了...就在最近一周左右。

通过Firebug检查（等等），我必须将特定的DIV设置为一个比正常大一个像素，否则里面的图片会被“挤出来”。

我明天才能访问我的服务器实际进行编辑，但“检查元素”显示这是一个解决方法。不确定为什么这个问题出现了，这个页面已经运行良好超过一年了 :-(

- mike