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

Posted 2023-03-06

【中文标题】Chrome 40 是不是打破了 justify-content CSS 覆盖？

【英文标题】：Did Chrome 40 break justify-content CSS overriding?Chrome 40 是否打破了 justify-content CSS 覆盖？

【发布时间】：2015-03-22 10:42:46

【问题描述】：

我注意到今天的 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（覆盖似乎已损坏）：

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

更新：提交为https://code.google.com/p/chromium/issues/detail?id=451387

【问题讨论】：

归档为code.google.com/p/chromium/issues/detail?id=451387

看起来它与这个问题有关：code.google.com/p/chromium/issues/detail?id=449887

所以？解决方案？是一个 chrome 错误（我们不得不等待下一次更新）还是我们不得不修改我们的 css？

@Radar155 这是一个错误。可能会在 Chrome 41 中修复：code.google.com/p/chromium/issues/detail?id=449887#c11

【参考方案1】：

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

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

---

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

【讨论】：

谢谢！我向 Chromium 提出了问题。有点奇怪，对于一个特定的属性，这么基本的东西坏了，但是，我从来没有写过浏览器..

【参考方案2】：

这是 @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');
            
        

        
    ;
);

【参考方案3】：

看起来肯定是一个错误，而且是一个非常严重/烦人的错误！

我写了一个小技巧来帮助我们度过难关。 您只想为受影响的 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');
        
    
);

【讨论】：

应该是这样的： if (navigator.userAgent.toLowerCase().indexOf('chrome/40') > -1) ...

Excelente soluciont，这对我有用，但在 angularjs 版本中

只是提醒一下，看起来这对于 chrome/41 来说仍然是一个问题（至少在 mac 上？）——可以只更改所有版本 40 的 'chrome/4' 的版本检测-49