相同的标记和CSS在ie8不同的页面上看起来不同

Question

I have to build a WordPress theme as a personal project. After testing it in IE8 the footer seems to not be showing the correct way on all pages. Which is very weird because all pages footers have the same styling.

I even deactivated all the styling in IE8 developer tools but the problems still persist.

In the contact page, the footer seems to be on the very far left corner making only half the footer visible.

On the blog page, the footer seems to be getting 960px width and it is centered.

On the rest of the pages, the footer looks ok.

As I mentioned above all footer pages have the same styling so I have no idea why on different pages the footer is shown differently

Here is the website: website

I am posting my entire footer markup and CSS because I have no idea what kind of CSS mistake could make IE8 show the same markup and CSS differently on different pages:

Html:

<footer>
    <div class="center">
          <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer Sidebar') ) : ?>  
          <h2 class="widget-title">No Widgets added</h2>  
          <p>Please login and add some widgets to this sidebar</p>  
          <?php endif ?>     
     </div>
        <div id="copyright">
            <p>&copy; Copyright <?=date('Y');?> <?php bloginfo('name'); ?> by <a href="<?php echo AUTHOR_URL ?>"><?php echo AUTHOR ?></a> All Rights Reserved.</p>
        </div>
       <?php wp_footer(); ?>
</footer>

CSS:

 footer{
        background:url(img/footer.png) repeat-x #1a1a1a;
        padding:33px 0;
    }
    footer div.center{
        overflow:hidden;
    }
    footer div.center div.boxFooter{
        display: inline-block;
        float:left;
        width:210px;
        margin-left: 40px;
    }
    footer div.center div.boxFooter:first-child{
        margin-left: 0;
    }
    footer div.center div h2{
        color:#cccccc;
        font-size: 20px;
        padding-bottom: 12px;
        border-bottom: 1px solid #ccc;
    }
    footer div.center div li{
        padding:10px 0;
        border-bottom:1px solid #b6b6b6;
    }footer div.center div li:last-child{
        border:none;
    }
    footer div.center div li a{
        text-decoration: none;
        color:#b6b6b6;
    }
    footer div.center div li a:hover{
        text-decoration: underline;
    }
    footer div.center div p{
        margin-top: 10px;
        text-align: justify;
        color:#b6b6b6;
    }
    footer form#searchform input{
        border-radius:5px;
        margin-top: 15px;
    }
    div#copyright{
        width:960px;
        margin:0 auto;
        border-top:1px solid #b6b6b6;
        margin-top:25px;
        color:#b6b6b6;
    }
    div#copyright p{
        margin-top:30px;
        text-align: center;
    }
    div#copyright p a{
        color:#1fa2e1;
        text-decoration: none;
    }
    div#copyright p a:hover{
        text-decoration:underline;
    }
    footer div.tagcloud{
        padding-top: 15px;

    }
    footer div.tagcloud a{
        color:#B6B6B6;
        text-decoration: none;
    }
    footer div.tagcloud a:hover{
        text-decoration: underline;
    }

Answer 1

I think you should Include Reset CSS at the top of your style.css file:

RESET CSS

Further More do websites need to look exactly the same in every browser .