Transition not working in IE

问题

I'm developing my own website, and one of the 'features' it has is that when I go with my mouse over the header, it slides down.

This works well and good on all major browsers. However, with IE 10, it doesn't. Here's the page source:

<?php
    echo "<html>
    <head>
        <title>memodesigns</title>
        <link rel='stylesheet' href='style/stylesheet.css'>
    </head>

    <body>";
                include_once('modules/header.php');
            echo "
    </body>

    </html>";
?>

This is the header file which is included:

<?php

    echo "<div id = 'menucontainer'>
            <div id = 'menu'>
                <p>
                    <ul>
                        <li><a class = 'menu' href = ''>HOME</a></li>
                        <li><a class = 'menu' href = 'about.php'>ABOUT</a></li>
                        <li><a class = 'menu' href = 'portfolio.php'>PORTFOLIO</a></li>
                        <li><a class = 'menu' href = 'rates.php'>RATES</a></li>
                        <li><a class = 'menu' href = 'contact.php'>CONTACT</a></li>
                    </ul>
                </p>
            </div>
        </div>";

?>

And the CSS styles being used here:

a.menu{
    padding-left: 20px;
    padding-right: 20px;
}

/*menucontainer*/
#menucontainer{
    position: absolute;
    margin-top: -8px;
    top: 0px;
    width: 100%;
    text-align: center;
    -webkit-transition: margin-top 0.5s;
    -moz-transition: margin-top 0.5s;
    -o-transition: margin-top 0.5s;
    transition: margin-top 0.5s;
}

/*menucontainer*/
#menucontainer:hover{
    margin-top: 0px;
}

/*menu*/
#menu{
    padding-top: 5px;
    margin-left: auto;
    margin-right: auto;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    -moz-border-radius-bottomleft: 12px;
    -moz-border-radius-bottomright: 12px;
    max-width: 75%;
    height: 25px;
    background-color: #202020;
    font-family: Roboto;
    color: #f3f4f4;
    font-size: 16px;
}

Would appreciate any help as to why transitions are not working in IE, but working on other major browsers.

回答1:

I suspect the issue might be compatibility mode.

If you do not have a proper doctype declaration as the very first line in a document, IE will enter compatibility mode and most features will not work as expected. Ensure that you have a valid doctype (<!DOCTYPE html> will be fine) and add <meta http-equiv="X-UA-Compatible" content="IE=edge" /> to your document <head>.

Also, make sure there is no extra whitespace before the doctype that could be introduced by the way you are echoing text in PHP.

回答2:

The given example has no doctype at all. Without valid doctype, any version of IE effectively turns into IE5.5.

Also, forget about PHP when you debug any HTML/CSS/Javascript problem. Browsers don't care what your markup is generated with, they see only the resulting HTML code that you can see by clicking 'View source' menu.

回答3:

Have you tried using -ms- vendor prefixes? I'm not entirely sure if this will fix it, but it's worth a shot :)

Seeing your comment, I think JSFiddle is adding something to the page, like normalize.css.

回答4:

Have you tried a js solution like jquery? Something like this might work:

$("#menu").mouseenter(
    function(){ 
        $(this).stop().animate({paddingTop:'20px'},'slow')
    });
$("#menu").mouseleave(
    function(e) {
        $(this).stop().animate({paddingTop:'5px'},'slow')
    });

Here is the fiddle http://jsfiddle.net/Bobyo/aXgAV/

来源：https://stackoverflow.com/questions/17558426/transition-not-working-in-ie

标签

css

internet-explorer

transitions