Flexbox项目在Firefox上无法正确显示

时间:2017-01-16 00:24:13

标签: html css css3 firefox flexbox

起初这个问题刚好发生在标题中,现在当我尝试使用Bourbon mixins修复它时,供应商前缀全部解决了,它也发生在主体中。至少这可能提供一种隔离问题的方法,因为我在修复之前发布了页面,之后,为了比较。

Before,其中带有容器类的div部分在当前版本的Firefox中正确显示 - 两个响应列。

After,这些部分正在堆叠并忽略flexbox,就像标题一样。

之前的CSS是:

SQL

我认为这是一切相关的东西。供应商前缀按正确的顺序,但它正在运作。

select unique_id, 
case when len(variable1)>0 then 1 else 0 as variable1, 
case when variable2 = 'A' then 1 else 0 end as variable2_A, 
case when variable2 = 'B' then 1 else 0 end as variable2_B, 
case when variable2 = 'C' then 1 else 0 end as variable2_C, ... 

在那里,所有供应商前缀看起来都是正确的,但是在该部分下面的堆栈,与头类sec1和sec2相同的问题。我检查了Flexbugs GitHub回购并没有在那里找到解释。有人看到了这个问题吗?

2 个答案:

答案 0 :(得分:3)

在BEFORE布局中,只需定义图像的高度即可解决问题:

.sec1 {
    flex-grow: 4;
    min-width: 400px;
    padding-right: 60px;
    margin-top: 2vw;
    height: 100%; /* new */
}

Chrome会自动将图片限制为父级的高度:

header { height: 290px; }

Firefox显然需要一条指令来做同样的事情。

此外,关于供应商前缀,最后列出标准属性(W3C版本)总是更好 - 在所有前缀版本之后。有关详细信息:

答案 1 :(得分:1)

您的问题是flex-grow:1表示您默认拥有flex-basis: auto,如果您使用flex:1,则设置flex: 1 1 0flex-basis:0),解决你的问题

看看这个伟大的guide about flexbox

这是一个简化的代码段

.container {
  display: flex;
  flex-wrap: wrap;
}
section {
  flex: 1;
  margin-left: 6vw; 
  margin-top: 3vw;
  /*min-width: 350px; - removed for demo */
  padding: 15px;
}
aside {
  flex: 0.5;
  margin-top: 5vw;
 /* min-width: 250px; - removed for demo */
}
<div class="container">
  <section>
    <div class="outerDiv">
      <div class="innerDiv intro">
        <h1>Realistic Lunar Colony, Coming Online</h1>
        <p>
          This project is building a series of virtual colonies on the Moon. They will be richly detailed and interactive presentations that are entirely plausible, technically and scientifically. They will examine all the questions, consider all the implications.
          When humanity undertakes ventures on the scale of space settlement, it matters a great deal how many people have given it real thought beforehand. These colonies serve that purpose.
          <br>
          <br>The first colony created will show a full town with a population of 20,000. It will have developed industries and facilities, spacious beautiful architecture, transport systems moving high volumes of people and cargo around the Moon and the
          solar system. It shows what happens just beyond the tipping point, when technology enables a space boom. To evaluate the importance of space exploration, this is the stage that must be understood.
          <br>
          <br>The next two colonies work outwards from there... forwards to the city that grows from the town, when technology allows a segmented glass dome to be placed over a crater 22 km across, becoming home to a million people... and backwards to the
          first missions that develop the basic techniques and infrastructure that make it all possible.
          <br>
          <br>These environments will be places to explore, create, collaborate, tell stories, and above all to learn and to contemplate our future. To that end, the project assumes an ideal political environment, in which a broad alliance of countries pursues
          lunar settlement with determination and vision, making the best technical decisions and investing as much as it takes to do it properly. In this way the project can educate regarding the real gamut of options before us, and the complete scope
          of such a vast endeavor.
          <br>
          <br>The entire project will always be open source, free of copyright, and free of charge. In this way, as long as it has a strong core framework, it has incredible potential for growth. Some virtual world project along these lines is going to explode
          in the near future. The time is right. Once a world is vivid enough, and provides the right tools, it will mushroom as talented people see the potential and dive in. Never have there existed ways for so very many people to collaborate so powerfully.
          Moonwards can reach towards two final frontiers - the one above our heads, and the one inside our heads. Let us see how powerful vision can be.
          <br>
          <br>All the project's files are on the <a href="https://github.com/briligg/moonwards">
GitHub repository of Moonwards</a>. It is at an early stage. It will always be 'under construction', though - that's its nature. You will see this revamped website filling out in the coming weeks, and then get new content regularly as the project advances.
          The same will happen to the repo, after that. You will see the models changing and new models being added, animated, and supplemented with other media. When the first, simple version of the virtual colony comes online, then we are really rolling.
          If you are inclined to take part, please contact me, comment in one of the sections provided, or use the other contact options shown on the <a href="project.html">Project</a> page.
        </p>
        <p class="byline">
          Jan. 11, 2017 by Kim -- kim@moonwards.com
        </p>
      </div>
    </div>
  </section>
  <aside>
    <div class="sideDiv" id="RSS-feed">
      <p id="item2" class="atom"><span class="datetime">Mon, 07 Nov 2016 19:50:00 GMT</span><span class="title"><a href="http://www.moonwards.com/">Lalande map</a></span><span class="description">Kim has finished composing an extremely detailed map of the Lalande crater. It is a huge file, but available at request.</span>
      </p>
      <p id="item1" class="atom"><span class="datetime">Tue, 01 Nov 2016 21:50:00 GMT</span><span class="title"><a href="http://www.moonwards.com/">3D models</a></span><span class="description">We now have 3D content available. Blend4web and Sketchfab models are now viewable in your browser.</span>
      </p>
      <p id="item0" class="atom"><span class="datetime">Tue, 01 Nov 2016 21:45:00 GMT</span><span class="title"><a href="http://www.moonwards.com/">News feed for Moonwards</a></span><span class="description">For all of you out there wanting to keep up with Moonwards, we are now going to post brief news to this handwritten RSS feed. Also consider our <a href="https://moonwards1.blogspot.com/feeds/posts/default">blog feed</a></span>
      </p>
    </div>
    <div class="sideDiv">
      <div class="framewrap frame16x9">
        <iframe src="https://www.youtube.com/embed/vF--hweQ1Ec" allowfullscreen=""></iframe>
      </div>
    </div>
  </aside>
</div>