相关疑难解决方法(0)

我们大量使用flexbox用于桌面应用程序,例如查看Web应用程序,它一直很好用.

但是使用最新的Firefox Developer Edition(35.0a2),布局的行为并不像预期的那样(它超出了视口):http://tinyurl.com/k6a8jde

这在Firefox 33.1中运行良好.

我认为这与此处描述的flexbox更改有关:https: //developer.mozilla.org/en-US/Firefox/Releases/34/Site_Compatibility

但遗憾的是,我还无法找到在FF 34或35.x中获得FF 33.x行为的方法.

有关布局或如何更好地隔离问题的任何帮助表示赞赏.

我已经发现了我认为是Firefox 34及以上版本中有关行为的错误display: flex.

我可以确认代码一直在所有现代浏览器中都有效,但仍然如此,但Firefox 34和最近的Firefox 35测试版的行为完全不一致.

我创造了一个演示不同行为的小提琴:http://jsfiddle.net/ntkawu63/

在Firefox 34+中启动它,它将忽略图像上的最大宽度:100%.在任何其他浏览器(包括Firefox 33)中,它会将最大宽度应用于图像并正常显示.

<style>
.mediaContainer
{
    zoom: 1;
    overflow: visible;
    position: relative;
}

.mediaCenterContainer
{
    display: flex;
    justify-content: center;
    align-items: center;
}

.imageContainer
{
    margin: 0 auto;
}

.imageContainer img
{
    margin-bottom: 10px;
    max-width: 100%;
}
</style>

<div class="mediaContainer mediaCenterContainer">
    <div class="imageContainer">
        <img src="http://dummyimage.com/1920x1080/000/fff.png&text=This+is+a+flex+box+test+for+Firefox+340x2B.+In+Chrome,+the+image+will+be+max-width:+1000x25.+In+Firefox+the+image+will+be+centered,+but+not+have+a+constrained+width." class="Image Tag Crop" alt="My Dog" data-realwidth="1000" data-realheight="670" data-scalewidth="944" data-scaleheight="633" />
    </div>
</div>

这段代码有什么问题,或者这是否应该作为Mozilla的bug出现？

我有一些代码,目前正在Chrome Stable上正确呈现.我收到有关代码在Beta和Dev上工作不正确的报告,我能够在Canary上重现该问题.我发现这个PSA似乎与我的问题有关.所以,我正在假设这是一个更严格遵循规范而不是错误的变化.

我的软件仅定位到Google Chrome.因此,不一定需要强大的解决方案,尽管向后兼容性会很好.

设置是:

• 父元素都有display:flex,flex-direction: column并且已经max-height应用到它.
• 父母的深层后裔超过了 max-height

行为改变是:

• 在稳定,max-height强制执行和孩子不爆发.
• 在金丝雀上,max-height被忽视,孩子爆发.

我能够防止儿童通过应用突破max-height的inner元素.然而,这是不可取的,因为我需要在非设计的例子中减少max-height高度footer不容易做到的值.

以下代码段突出显示了我的问题:

.outer {
  display: flex;
  flex-direction: column;
  max-height: 410px;
}
.inner {
  display: flex;
  flex-direction: column;
}
.content {
  width: 200px;
  height: 500px;
  background-color: green;
}
.footer {
  height: 20px;
  width: 200px;
  background-color: red;
}

<div class='outer'>
  <div class='inner'>
    <div class='content'>
    </div>
  </div>
  <div class='footer'>
  </div>
</div> …