这是Chrome CSS错误吗？ [英] Is this a Chrome CSS bug?

问题描述

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

请参阅

解决方案

的级联。如果你看看Web Inspector，你会看到 justify-content：center 声明被抛出，但是只有当你取消选中它（以类似的方式注释它）可以让Chrome忽略它。

也许他们不小心打破了Chrome 39和40之间的变化，因为他们有一个真正令人讨厌的习惯，但我不知道是什么。

---

从问题，显然他们做了一些有趣的级联解析代码，以适应对Flexbox规范的某些更改，这似乎是这个的原因。再次，我并不声称了解他们这样做的原因，但他们似乎有一个习惯，重写事情在这里和那里导致回归在整个地方。好东西Chrome是一个常绿的快速发布周期，eh？

I noticed with today's Chrome 40 update that justify-content does not seem to get properly overriden by subsequent style declarations.

See this fiddle for an example:

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

and

.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 (override works):

Chrome 40 (override seems to be broken):

Am I correct in my assumptions or do I horribly misunderstand CSS? Note that this doesn't have to do with prefixes: Chrome supports unprefixed justify-content, and if it didn't work, there wouldn't be any difference when commenting out rules in first selector.

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

解决方案

You are entirely correct in your understanding of the cascade. If you look in the Web Inspector, you'll see the justify-content: center declaration struck out, but only when you uncheck it (in a similar fashion as commenting it out) can you get Chrome to ignore it.

Perhaps they accidentally broke something in a change between Chrome 39 and 40, as they have a really irritating habit of doing, but I have no idea what.

---

From the issue that rwacarter linked to, apparently they did something funky with their cascade resolution code in order to accommodate certain changes to the Flexbox spec, which seems to be the cause for this. Again, I don't claim to understand their reasons for doing so, but they seem to have a habit of rewriting things here and there that result in regressions all over the place. Good thing Chrome is on an evergreen rapid release cycle, eh?

这篇关于这是Chrome CSS错误吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！