0

我正在为一家公司构建响应式登录页面，而 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 都失败了。关于我所缺少的任何想法？请记住背景的响应性质。

4

1 回答 1

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>
于 2013-11-08T16:10:25.380 回答