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

回答1:

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>

来源：https://stackoverflow.com/questions/19863286/positioning-and-height-not-working-correctly-in-firefox-ie

标签

html

css

css3

responsive-design