定位和高度在Firefox / IE中无法正常工作 [英] Positioning and Height not working correctly in Firefox/IE

问题描述

我正在为一家公司构建响应式登录页面，CTA的职位拒绝在Chrome之外工作。这里是铬完美工作，减少大小，因为我希望它： http://hydraservers.net/builds/

以下CSS正在实现。

 ＃ page1Container {
最大高度：700px; 
 min-height：700px; 
} 
 
＃page1Background {
 background：＃c5c5c5 url（../../../ media / bg.jpg）no-repeat; 
背景位置：50％50％; 
 background-size：cover; 
宽度：100％; 
身高：100％; 
填充底部：23.5％; 
} 
 
＃page1Container .page1CTA {
 width：1400px; 
身高：100％; 
 margin：auto; 
} 
 
＃page1Container .page1CTA＃page1CTApos {
 position：relative; 
 top：26％; 
} 
  

以下是DIV结构：

 < div id =page1Container> 
< div id =page1Background> 
< div id =adjustMeclass =page1CTA> 
< div id =page1CTApos> 
< h1><？php echo $ config ['homeHead1']; ？>< / H1> 
< h2><？php echo $ config ['homeHead2']; ？>< / H2> 
< div class =page1Button>< a href =get-started.php>开始免费月份< / a>< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
  

Chrome绝对是我想要实现的目标，但Firefox和IE都在崩溃。任何想法我缺少什么？请记住背景的响应性。

解决方案

我简化了代码。尝试在H1的顶部添加保证金，而不是在＃page1CTApos元素上使用定位：

 ＃page1Container {
高度：700px; 
背景：＃c5c5c5 url（../../../ media / bg.jpg）no-repeat; 
 background-size：cover; 
填充底部：23.5％; 
} 
＃page1Container> div {
 width：1400px; 
身高：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>开始免费月份< / a>< / div> 
< / div> 
< / div> 
  

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. Here is is working perfectly in chrome, reducing in size as I want it to: http://hydraservers.net/builds/

The following CSS is achieving that.

#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 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. 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:

#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中无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！