flex不工作在Firefox 53 [英] flex not working in firefox 53

问题描述

这里卡住了。我正在用Firefox 53测试我的网站。页面没有填满整个高度。我在Chrome和Safari上进行了验证，并且一切都很好。

我通过www.caniuse.com验证了Firefox 53支持 Flex 。仍然页面不能正确呈现。

这是网站 http://actionmary.com/newSite/contact.html 。尝试在Chrome浏览器中正确呈现，并在Firefox中显示不正确。

  html {
 background-color：black; 
} 
 
 body {
 / * min-width：800px;假设你想最小宽度1000px * / 
 / * width：auto！important; Firefox将宽度设置为auto * / 
 width：100％; 
 
 margin：0; 
 font-family：'futura-pt'，sans-serif; 
 font-style：normal; 
 font-weight：400; 
 
 display：flex; 
 flex-flow：column; 
背景重复：不重复; 
 background-size：cover; 
} 
 
 .content {
 width：100％; 
 flex：1 1 auto; 
 overflow：hidden; 
 
  

解决方案

em>百分比高度。例如：

  .blackbox {min-height：23％; } 
  

你也没有定义父元素的高度，一些浏览器为了渲染您可以期望使用此方法浏览器之间的渲染变化。

对于可靠的，跨浏览器的解决方案，给元素：

  height ：100vh; 
  

或者，如果您希望正文展开内容：



  min-height：100vh; 
  

更多详情：



• 使用CSS height 属性和百分比值


• Chrome浏览器/ Safari浏览器未填充flex父项的100％高度
>

Bit stuck here. I am testing my site with Firefox 53. The pages are not filling the full height. I verified on Chrome and Safari and all looks well.

I verified with www.caniuse.com that Firefox 53 supports Flex. Still the page does not render correctly.

Here is the site http://actionmary.com/newSite/contact.html. Try on Chrome where it renders correctly and Firefox 53 where it does not.

Here is the Relevant CSS

html{
    background-color: black;
}

body {
    /*min-width:800px;  suppose you want minimun width of 1000px */
    /*width: auto !important;   Firefox will set width as auto */
    width:100%; 

    margin:0;
    font-family: 'futura-pt', sans-serif;
    font-style: normal;
    font-weight: 400;

    display: flex;
    flex-flow: column;
    background-repeat:no-repeat;
    background-size:cover;
}

.content {
    width: 100%;
    flex: 1 1 auto;
    overflow: hidden;    
}

解决方案

You're working with percentage heights. For example:

.blackbox { min-height: 23%; }

You're also not defining a height on parent elements, which some browsers require in order to render a percentage height on the child.

You can expect rendering variations among browsers with this method.

For a reliable, cross-browser solution, give the body element:

height: 100vh;

Or, if you want the body to expand with content:

min-height: 100vh;

More details here:

• Working with the CSS height property and percentage values
• Chrome / Safari not filling 100% height of flex parent

这篇关于flex不工作在Firefox 53的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！