Question

我在Chrome 40.0.2214.93中遇到问题，如果我覆盖了某个元素的justify-content，我会遇到一些意想不到的行为。

我在这里创建了一个JS小提琴： http://jsfiddle.net/n670tmeu/

html

<header id="top">
  <div id="box1">
    This is Box 1
  </div>
  <div id="box2">
    This is Box 2
  </div>
</header>

CSS

header {
  background-color: #ccc;
  width: 100%;
  display: -webkit-flex;
  display: -moz-flexbox;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: flex-end;
     -moz-justify-content: flex-end;
      -ms-justify-content: flex-end;
          justify-content: flex-end;
}

header#top {
  -webkit-justify-content: space-between;
     -moz-justify-content: space-between;
      -ms-justify-content: space-between;
          justify-content: space-between;
}

#box1, #box2 {
  border-width: 1px;
  border-style: solid;
  border-color: red;
}

您会注意到更具体的header#top会覆盖justify-content，但在Chrome中，它会将第一个项目推到flex-end位置，然后为此添加额外的空间space-between。

我在FireFox 35.0.1和Safari 7.1.2中尝试了这一点，它们都能正常运行。这是Chrome中的错误还是我做错了什么？

Answer 1

这是一个已知的错误，从最新的canary版本（42.0.2289.0）开始修复：

https://code.google.com/p/chromium/issues/detail?id=452606

与此同时，您可以使用this jQuery解决方法作为临时修复：

$('body *').each(function(i, el) {
    var justifyContents = $(el).css('justify-content').split(' ');
    var flexFlows = $(el).css('flex-flow').split(' ');
    if (flexFlows[0] == 'row' && justifyContents.length > 1) {
        if (justifyContents[0] == 'space-between' || justifyContents[0] == 'flex-start') {
            $(el).css('justify-content', justifyContents[0]+' left');
        } else if (justifyContents[0] == 'flex-end') {
            $(el).css('justify-content', justifyContents[0]+' right');
        }
    }
});

Chrome无法正确覆盖弹性框的对齐内容

1 个答案: