Question

我要保持这个简短的说明，我测试的所有浏览器都有效，firefox是唯一一个决定它不会放弃声明而忽略它的浏览器？

我使用以下CSS

header{height:118px;}
section#head{padding:0% 12.5%;padding-top:200px;min-height:60%;min-height:calc(100% - (118px + 200px));}
.splitOb{width:50%;float:left;}

.clearfix:after{display:block;content:'';visibility:hidden;clear:both;}

我的HTML

<header>
    <h1>Header</h1>
</header>
<section id="head">
    <h1>Make me in the middle D'X</h1>
</section>
<section id="examples">
    <div class="split clearfix">
        <div class="splitOb">
            <h2>Left</h2>
        </div>
        <div class="splitOb">
            <h2>Right</h2>
        </div>
    </div>
</section>

现在我已经听说float可能导致min-height出现firefox问题，并且读到在父级上添加overflow:hidden;可以解决此问题：

.clearfix{overflow:hidden;}

但是没有，firefox仍然想要忽略我......请有人告诉我如何获得firefox的关注并使我的元素成为正确的高度DX

Answer 1

可能会帮助你。

使用浏览器前缀：

＆＃13;

/* Firefox */
-moz-calc(75% - 100px);
/* WebKit */
-webkit-calc(75% - 100px);
/* Opera */
-o-calc(75% - 100px);
/* Standard */
calc(75% - 100px);

＆＃13;

firefox min-height属性没有丢弃而是被忽略了？

1 个答案: