Chrome浏览器没有正确覆盖Flex框的内容 [英] Chrome not properly overriding justify-content for flex box

问题描述

我在Chrome 40.0.2214.93中遇到问题，如果我重写元素的 justify-content ，我会遇到一些意想不到的行为。

我为此创建了一个JS小提琴：
http：//


$ > < header id =top>
< div id =box1>
这是Box 1
< / div>
< div id =box2>
这是Box 2
< / div>
< / header>


css

  header {
 background-color：#ccc; 
宽度：100％; 
 display：-webkit-flex; 
 display：-moz-flexbox; 
 display：-ms-flexbox; 
 display：flex; 
 -webkit-justify-content：flex-end; 
 -moz-justify-content：flex-end; 
 -ms-justify-content：flex-end; 
 justify-content：flex-end; 
} 
 
 header＃top {
 -webkit-justify-content：space-between; 
 -moz-justify-content：space-between; 
 -ms-justify-content：space-between; 
 justify-content：space-between; 
} 
 
＃box1，＃box2 {
 border-width：1px; 
 border-style：solid; 
 border-color：red; 
 
 
 
 $ b $ p 
 $ b 
你会注意到更具体的顶部会覆盖 justify-content ，但是在Chrome中，它会将第一个项目推送到 flex-end  position然后为空间之间增加额外的空间。  
 
 
我已经在FireFox 35.0.1和Safari 7.1.2中试过了，它们都能正常工作。这是一个在Chrome中的错误，或者我做错了什么？
解决方案
这是一个已知的错误，金丝雀生成（42.0.2289.0）：
 
 
  https://code.google.com/p/chromium/issues/detail?id=452606  
 
 
 
与此同时，您可以使用这个 jQuery解决方法作为临时修订：
  $（'body *'）。each（function（i，el）{
 var justifyContents = $（el）.css（'justify-content'） .split（''）; 
 var flexFlows = $（el）.css（'flex-flow'）。split（''）; 
 if（flexFlows [0] =='row'& amp ;& 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'）; 
} 
} 
}）; 
  
 
I'm having an issue in Chrome 40.0.2214.93 where if I override the justify-content for an element I get some unexpected behavior.

I've created a JS Fiddle for this here: 
http://jsfiddle.net/n670tmeu/

html 
<header id="top">
  <div id="box1">
    This is Box 1
  </div>
  <div id="box2">
    This is Box 2
  </div>
</header>
css
header {
  background-color: #ccc;
  width: 100%;
  display: -webkit-flex;
  display: -moz-flexbox;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: flex-end;
     -moz-justify-content: flex-end;
      -ms-justify-content: flex-end;
          justify-content: flex-end;
}

header#top {
  -webkit-justify-content: space-between;
     -moz-justify-content: space-between;
      -ms-justify-content: space-between;
          justify-content: space-between;
}

#box1, #box2 {
  border-width: 1px;
  border-style: solid;
  border-color: red;
}
You'll notice that the more specific header#top overrides the justify-content however in Chrome it ends up pushing the first item to the flex-end position then adds extra space for for the space-between. 

I've tried this in FireFox 35.0.1 and Safari 7.1.2 and they both work properly. Is this a bug in Chrome or did I do something wrong?
解决方案
This is a known bug that is fixed as of the latest canary build (42.0.2289.0): 

https://code.google.com/p/chromium/issues/detail?id=452606

In the meantime, you can use this jQuery workaround as a temporary fix:
$('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');
        }
    }
});


                        
这篇关于Chrome浏览器没有正确覆盖Flex框的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！