La Transition ne fonctionne pas sous IE

Je suis le développement de mon propre site web, et l'une des "caractéristiques" il a, c'est que quand je vais avec ma souris sur l'en-tête, il glisse vers le bas.

Cela fonctionne bien sur tous les principaux navigateurs. Cependant, avec IE 10, il n'a pas. Voici le source de la page:

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

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

    </html>";
?>

C'est le fichier d'en-tête qui est inclus:

<?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>";

?>

Et les styles CSS utilisé ici:

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;
}

Serais reconnaissant de toute aide pourquoi les transitions ne sont pas de travail dans IE, mais de travailler sur d'autres navigateurs.

Bienvenue dans Internet Explorer. Vous ne serez pas profiter de votre séjour.
Je suggère de ne pas lier à un anonyme site comme vous l'avez fait. Essayez jsbin ou jsfiddle ou quelque chose de similaire.
La page est propre. Aussi, sur une autre note, j'ai confirmé l'existence de ce dans internet explorer 10 sur Windows 7 à l'aide de BrowserStack.
Une raison en particulier? Ces deux sites semblent orientés vers le HTML et le Javascript, plutôt que de PHP. EDIT: Merci Ian Carroll
On ne comprend pas que beaucoup de gens cliquant sur un domaine inconnu à partir d'ici. Ian est passé par une étape que la plupart d'entre nous sont trop paresseux pour le faire 🙂

OriginalL'auteur MemoNick | 2013-07-09

10

Je soupçonne que le problème pourrait être le mode de compatibilité.

Si vous n'avez pas une bonne déclaration doctype que la première ligne dans un document, c'est à dire va entrer en mode de compatibilité et la plupart des fonctionnalités ne fonctionneront pas comme prévu. S'assurer que vous avez un doctype valide (<!DOCTYPE html> sera très bien) et ajouter <meta http-equiv="X-UA-Compatible" content="IE=edge" /> à votre document <head>.

Aussi, assurez-vous il n'y a aucun espace avant le doctype qui peut être introduit par la façon dont vous êtes en écho du texte en PHP.

Dang, j'écrivais! D:
Non, pas de chance :/
Ouais, IE10 devrait supporter le standard de la propriété. Je pense que le problème peut être le mode de compatibilité.
Oh, qui a fait le tour (juste <!DOCTYPE html>). Merci beaucoup!
Belle Réponse merci pour la solution 🙂

OriginalL'auteur nullability
1

L'exemple donné n'a pas de doctype. Sans doctype, tout version de IE effectivement se transforme en IE5.5.

Aussi, oublier de PHP lors du débogage de code HTML/CSS/Javascript problème. Les navigateurs ne se soucie pas ce que votre marge est généré avec, ils voient bien le résultat de code HTML que vous pouvez voir en cliquant sur "Afficher la source" du menu.

Pensé que beaucoup de (re: PHP). Pour vous dire la vérité, je suis totalement d' <b>oublié</b> sur le Doctype. Merci beaucoup! 🙂

OriginalL'auteur Ilya Streltsyn
0

Avez-vous essayé d'utiliser -ms- vendeur préfixes? Je ne suis pas entièrement sûr si cela va régler le problème, mais il est vaut le coup 🙂

De voir ton commentaire, je pense JSFiddle est d'ajouter quelque chose à la page, comme le normaliser.css.

Non, pas de chance :/

OriginalL'auteur StackExchange User
0

Avez-vous essayé un js solution comme jquery?
Quelque chose comme cela peut fonctionner:
```
$("#menu").mouseenter(
    function(){ 
        $(this).stop().animate({paddingTop:'20px'},'slow')
    });
$("#menu").mouseleave(
    function(e) {
        $(this).stop().animate({paddingTop:'5px'},'slow')
    });
```
Ici est le violon
http://jsfiddle.net/Bobyo/aXgAV/

Est-ce la solution la plus facile/plus faisable? J'ai aimé le CSS solution, et il a fait le travail. Je sais que les transitions ne fonctionne pas sur IE 9 et ci-dessous, mais franchement, je n'ai pas vraiment de soins sur IE.
Si vous n'avez pas de soins sur IE9 et en dessous, il est préférable d'utiliser les css. Je peresonaly aime avoir mes animations en js mais le css est une belle et propre solution si vous dopn se soucient pas de xbrowser compatibilité

OriginalL'auteur AlexForm

Vous devez vous connecter pour publier un commentaire.