html - 定位和高度在 Firefox/IE 中无法正常工作

Question

我正在为一家公司构建响应式登陆页面，而 CTA 的立场是拒绝在 Chrome 之外工作。这是在 chrome 中完美运行的，按照我的意愿减小了尺寸:http://hydraservers.net/builds/

下面的 CSS 实现了这一点。

#page1Container {
    max-height: 700px;
    min-height: 700px;
}

#page1Background {
    background: #c5c5c5 url(../../../media/bg.jpg) no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    width: 100%;
    height: 100%;
    padding-bottom: 23.5%;
}

#page1Container .page1CTA {
    width: 1400px;
    height: 100%;
    margin: auto;
}

#page1Container .page1CTA #page1CTApos {
    position: relative;
    top: 26%;
}

连同以下 DIV 结构:

<div id="page1Container">
    <div id="page1Background">
        <div id="adjustMe" class="page1CTA">
            <div id="page1CTApos">
                <h1><?php echo $config['homeHead1']; ?></h1>
                <h2><?php echo $config['homeHead2']; ?></h2>
                <div class="page1Button"><a href="get-started.php">Start Your Free Month</a></div>
            </div>
        </div>
    </div>
</div>

Chrome 绝对是我想要实现的目标，但 Firefox 和 IE 都失败了。对我所缺少的有什么想法吗？请记住背景的响应性质。

Answer 1

我稍微简化了代码。尝试在 H1 的顶部添加边距，而不是在 #page1CTApos 元素上使用定位:

#page1Container{
    height: 700px;
    background: #c5c5c5 url(../../../media/bg.jpg) no-repeat;
    background-size: cover;
    padding-bottom: 23.5%;
}
#page1Container > div{
    width: 1400px;
    height: 100%;
    margin: auto;
}
#page1Container h1{
    margin-top:26%
}

<div id="page1Container">
    <div>
        <h1><?php echo $config['homeHead1']; ?></h1>
        <h2><?php echo $config['homeHead2']; ?></h2>
        <div class="page1Button"><a href="get-started.php">Start Your Free Month</a></div>
    </div>
</div>