[英]Positioning and Height not working correctly in Firefox/IE
I am in the middle of building a responsive landing page for a company and the position of the CTA is refusing to work outside of chrome. 我正在为一家公司构建一个响应式登录页面,而CTA的职位则拒绝在chrome之外工作。 Here is is working perfectly in chrome, reducing in size as I want it to: http://hydraservers.net/builds/ 这在chrome中工作正常,可以按我的要求减小其尺寸: http : //hydraservers.net/builds/
The following CSS is achieving that. 以下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%;
}
Along with the following DIV structure: 以及以下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 is absolutely nailing what I want to achieve, but Firefox and IE are both falling over. Chrome浏览器绝对是我想要实现的目标,但是Firefox和IE都崩溃了。 Any ideas of what I am missing? 关于我所缺少的任何想法? Bare in mind the responsive nature of the background. 切记背景的响应性。
I've simplified the code a bit. 我已经简化了代码。 Try adding a margin to the top of the H1 rather than using positioning on the #page1CTApos element: 尝试在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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.