Chrome 40 是否打破了 justify-content CSS 覆盖？

Question

我注意到今天的 Chrome 40 更新 justify-content 似乎没有被后续样式声明正确覆盖。

请参阅 this fiddle 示例：

  <div class="flex-parent">
    <div class="flex-child"></div>
    <div class="flex-child"></div>
  </div>

和

.flex-parent {
  display: flex;
  position: absolute;
  top: 0; right: 0; left: 0;

  /*
     IT SHOULD BE POSSIBLE TO SAFELY REMOVE
     THESE TWO LINES BECAUSE THEY ARE OVERRIDEN:
  */
  background: yellow;
  justify-content: center;
}

.flex-parent {
  /* Overriding background: it works! */
  background: green;

  /* Overriding justify-content: NOPE ;-( */
  justify-content: space-between;
}


.flex-child {
  width: 50px;
  height: 50px;
  margin: 10px;
  background: skyblue;
}

Firefox（覆盖有效）：

Chrome 40（override好像坏了）：

我的假设是正确的还是我误解得很厉害CSS？请注意，这与前缀无关：Chrome 支持无前缀 justify-content，如果它不起作用，则在第一个选择器中注释掉规则时不会有任何区别。

Update: filed as https://code.google.com/p/chromium/issues/detail?id=451387

Answer 1

您对级联的理解完全正确。如果您在 Web Inspector 中查看，您会看到 justify-content: center 声明被删除，但只有当您取消选中它（以类似于注释掉它的方式）时，您才能让 Chrome 忽略它。

也许他们在 Chrome 39 和 40 之间的变化中不小心弄坏了一些东西，因为他们有一个非常恼人的习惯，但我不知道是什么。

从 rwacarter 链接到的 issue 来看，显然他们对级联解析代码做了一些时髦的事情，以适应对 Flexbox 规范的某些更改，这似乎是造成这种情况的原因。同样，我并不声称理解他们这样做的原因，但他们似乎有在这里和那里重写东西的习惯，这会导致到处都是回归。好东西 Chrome 处于常青树快速发布周期，嗯？

Answer 2

看起来绝对是一个错误，而且是一个非常 serious/annoying 的错误！

我写了一个 hack 来帮助我们度过难关。 对于受影响的 chrome 版本，您只需要运行并且可能希望针对您的应用程序进一步定制和测试它：

$('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');
        }
    }
});

Answer 3

这是@Mike T

发布的脚本的angularjs实现

angular.module('myApp').directive('flexChromeFix', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs, fn) {

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

        }
    };
});

Chrome 40 是否打破了 justify-content CSS 覆盖？

Did Chrome 40 break justify-content CSS overriding?

css

google-chrome

css-specificity

flexbox