Question

我正在为公司构建响应式登陆页面，而CTA的位置拒绝在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>

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

1 个答案: