Question

我很难在Internet Explorer 8中获取我的页脚图像以显示在我的网站datingshotgun.com上。特别是注入标签的“footer-logo.png”。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>DatingShotgun.com</title>
    <link rel="stylesheet" href="css/styles.css"/>
    <!-- TypeKit -->
    <script type="text/javascript" src="http://use.typekit.com/mtx2hld.js"></script>
    <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <!-- Custom Script -->
    <script src="js/scripts.js"></script>
    <!-- Google Analytics -->
    <script type="text/javascript">

      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-28481508-1']);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();

    </script>   
</head>
<body>
    <header>
        <div class="logo">
            <h1>Dating Shotgun</h1>
        </div>
    </header>
    <div class="content">
        <div class="comingsoon"><p class="comingsoon_image"></p></div>
        <h1>Sign Up Now</h1>
        <p class="description">Be the first to receive a weekly dose of eligible<br />bachelors handpicked by two girls on the prowl.</p>
        <form action="index.php" method="post">
            <input type="email" class="email" name="email" maxlength="50" placeholder="Email Address">
            <input type="text" class="zip" name="zip" maxlength="5" placeholder="Zip Code">
            <input type="submit" class="submit" name="submit" value="Submit">
            <p class="errors">
            <?php 
                if (count($errors) != 0) { 
                    foreach($errors as $error) { 
                        echo $error . "<br />";
                    }
                } else {
                    echo $success; 
                }
            ?>
            </p>
        </form>
    </div>
    <footer>
        <p class="line"></p>
        <a href="http://flirtexting.com/" title="Flirtexting"></a>
    </footer>
</body>
</html>

CSS

/*-----------------------------------------------------------------------------------*
Colors:
Grey: #CCCCCC; 
Pink: #ff0099;
*/
/*-----------------------------------------------------------------------------------*
/*CSS Reset
/*-----------------------------------------------------------------------------------*/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/*-----------------------------------------------------------------------------------*
/*General
/*-----------------------------------------------------------------------------------*/
* {
    padding: 0;
    margin: 0;
}
html {
    background-color: #FFFFFF;
    color: #CCCCCC;
    font-family: "proxima-nova", Helvetica, sans-serif;
}
body {

}
header {

}
.content {

}
/*-----------------------------------------------------------------------------------*
/*Logo
/*-----------------------------------------------------------------------------------*/
.logo {
    background: url('../images/datingshotgun-logo.png');
    width: 380px;
    height: 60px;
    display: block;
    text-indent:-9999px;
    margin: 60px auto 54px auto;
}
.logo h1 {
    display: block;
    text-indent:-9999px;
}
/*-----------------------------------------------------------------------------------*
/*Coming Soon
/*-----------------------------------------------------------------------------------*/
.comingsoon {
    /*background: url('../images/comingsoon.jpg') no-repeat;
        width: 1020px;
        height: 67px;
        margin: 0 auto 0 auto;*/
    border-top: 1px solid #CCCCCC;
}
.comingsoon_image {
    background: url('../images/comingsoon.png');
    width: 115px;
    height: 12px;
    margin: -6px auto 0 auto;
}
/*-----------------------------------------------------------------------------------*
/*Sign Up Now
/*-----------------------------------------------------------------------------------*/
h1 {
    font-size: 18px;
    color: #000000;
    text-align: center;
    margin: 45px 0 18px 0;
    text-transform: uppercase;
}
.description {
    font-size: 14px;
    text-align: center;
    font-family: "ff-tisa-web-pro", Georgia, serif;
    line-height: 1.25em;
    color: #999999;
}
/*-----------------------------------------------------------------------------------*
/*Form
/*-----------------------------------------------------------------------------------*/
form {
    width: 410px;
    height: 35px;
    margin: 17px auto 40px auto;
    color: #999999;
}
input {
    font-size: 13px;
    float: left;
    margin-right: 5px;
    line-height: 2.5em;
    margin-bottom: 5px;
}
input:focus {
    outline: none;
}
.email {
    width: 186px;
    height: 33px;
    padding-left: 10px;
}
.zip {
    width: 77px;
    height: 33px;
    padding-left: 10px;
}
.email,.zip,.submit {
    border: 1px solid #CCCCCC;
}
.email:focus,.zip:focus {
    border: 1px solid #8C8C8C;
    background: url('../images/topfade.gif') repeat-x;
}
.submit {
    width: 89px;
    height: 35px;
    background-color: #CCCCCC;
    color: #FFFFFF;
    font-size: 13px;
    background: url('../images/submit.png') repeat-x;
}
.submit:active {
    color: #8C8C8C;
}
.errors {
    color: #ff0099;
    margin: 5px auto 0 auto;
    width: 400px;
    height: 50px;
    text-align: center;
    font-size: 12px;
}
/*-----------------------------------------------------------------------------------*
/*Footer
/*-----------------------------------------------------------------------------------*/
.line {
    background: url('../images/line.png');
    width: 460px;
    height: 1px;
    margin: 0 auto 23px auto;
}
footer {
    display: block;
    height: 100%;
}
footer a { 
    background: url('../images/flirt-logo.png');
    width: 120px;
    height: 43px;
    margin: 0 auto;
    cursor: pointer;
    display: block;
}

Answer 1

IE8及更低版本无法正确识别未知元素，从而导致各种问题。

要解决此问题，您需要使用html5shiv之类的JavaScript修补程序。

Answer 2

它在ie9中显示ok，在版本9之前，即不对未知元素inc应用任何样式，因此页脚不会被视为块级元素，您需要将类和样式应用于p标记它位于其中，因此可以根据需要显示。

无法在IE8中显示页脚图像？

2 个答案: