我注意到今天的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
答案 0 :(得分:9)
您对级联的理解完全正确。如果您查看Web Inspector,您会看到justify-content: center
声明已被删除,但只有当您取消选中它时(以与评论它类似的方式),您才能让Chrome忽略它。
也许他们在Chrome 39和40之间的变化中意外地破坏了一些东西,因为他们有一种非常恼人的习惯,但我不知道是什么。
从rwacarter链接到的issue,显然他们用级联解析代码做了一些时髦的事情,以适应Flexbox规范的某些变化,这似乎是导致这种情况的原因。同样,我并没有声称理解他们这样做的原因,但他们似乎习惯于在这里和那里重写事物,导致整个地方出现回归。好的东西Chrome正处于常青快速发布周期,嗯?
答案 1 :(得分:3)
绝对看起来像是一个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');
}
}
});
答案 2 :(得分:1)
这是@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');
}
}
}
};
});