Chrome40是否证明了内容CSS覆盖的合理性？

我注意到在今天的Chrome 40更新中，

justify content

似乎没有被后续的样式声明正确覆盖

有关示例，请参见：

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

Firefox（覆盖工作）：

Chrome 40（覆盖似乎已损坏）：

我的假设是正确的还是我严重误解了CSS？请注意，这与前缀无关：Chrome支持unfixed

justify content

，如果它不起作用，在第一个选择器中注释掉规则时不会有任何区别

更新：存档为

---

你对级联的理解是完全正确的。如果您查看Web Inspector，您将看到删除了

justify content:center

声明，但只有当您取消选中它（以类似于注释它的方式）时，您才能让Chrome忽略它

也许他们在Chrome39和Chrome40之间的一次更换中不小心弄坏了什么东西，因为他们有一个非常恼人的习惯，但我不知道是什么

---

---

从Carter链接到的代码来看，显然他们对级联解析代码做了一些古怪的事情，以适应Flexbox规范的某些更改，这似乎是造成这种情况的原因。再说一次，我并不声称理解他们这样做的原因，但他们似乎有一个习惯，在这里和那里重写的东西，导致各地的倒退。好在Chrome正处于一个常青的快速发布周期，嗯？

看起来肯定是一个bug，而且是一个非常严重/恼人的bug

我写了一篇文章来帮助我们度过难关您只希望对受影响的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');
        }
    }
});

---

这是@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 bug（我们不得不等待下一次更新）还是我们不得不修改css？@Radar155这是一个bug。可能是固定在铬41：谢谢！我向Chromium提交了一份文件。有点奇怪，一个特定的属性出现了如此基本的问题，但是，我从来没有编写过浏览器..应该是这样的：if（navigator.userAgent.toLowerCase（）.indexOf（'chrome/40'）>-1{…}Excelente soluciont，这对我来说是可行的，但在angularjs版本中只是一个提示，看起来这对于chrome/41来说仍然是一个问题（至少在mac上？）——只需更改所有版本40-49的“chrome/4”的版本检测即可

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

        }
    };
});