过渡在 IE 中不起作用答案

【问题标题】：Transition not working in IE过渡在 IE 中不起作用
【发布时间】：2013-07-09 21:18:37
【问题描述】：

我正在开发自己的网站，它的“功能”之一是当我将鼠标悬停在标题上时，它会向下滑动。

这适用于所有主要浏览器。但是，对于 IE 10，它不会。以下是页面来源：

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

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

    </html>";
?>

这是包含的头文件：

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

?>

以及这里使用的 CSS 样式：

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

不胜感激任何关于为什么过渡在 IE 中不工作，但在其他主要浏览器上工作的帮助。

【问题讨论】：

欢迎使用 Internet Explorer。你不会享受你的逗留。
我建议不要像你那样链接到一个未知的网站。尝试 jsbin 或 jsfiddle 或类似的东西。
@DMoses 页面很干净。另外，另一方面，我已经使用 BrowserStack 在 Windows 7 上的 IE 10 中确认了这一点。
有什么特别的原因吗？这两个网站似乎面向 HTML 和 Javascript，而不是 PHP。编辑：谢谢伊恩卡罗尔
不会有那么多人从这里点击未知域。伊恩经历了我们大多数人都懒得做的一步:)

标签： css internet-explorer transitions

【解决方案1】：

我怀疑问题可能是兼容模式。

如果您没有将正确的 doctype 声明作为文档的第一行，IE 将进入兼容模式，大多数功能将无法按预期工作。确保您有一个有效的文档类型（<!DOCTYPE html> 可以）并将<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 添加到您的文档<head>。

另外，请确保文档类型之前没有多余的空格，因为您在 PHP 中回显文本的方式可能会引入这些空格。

【讨论】：

该死，我在写那个！ D：
是的，IE10 应该支持标准属性。我认为问题可能是兼容模式。

【解决方案2】：

给定的示例根本没有文档类型。如果没有有效的文档类型，任何版本的 IE 都会有效地转换为 IE5.5。

此外，当您调试任何 HTML/CSS/Javascript 问题时，请忘记 PHP。浏览器不关心你的标记是用什么生成的，它们只看到生成的 HTML 代码，你可以通过单击“查看源代码”菜单看到这些代码。

【讨论】：

想了这么多（re: PHP）。说实话，我完全忘记了 Doctype。非常感谢你！ :)

【解决方案3】：

您是否尝试过使用-ms- 供应商前缀？我不完全确定这是否会解决它，但值得一试:)

看到您的评论，我认为 JSFiddle 正在向页面添加一些内容，例如 normalize.css。

【讨论】：

【解决方案4】：

你试过像 jquery 这样的 js 解决方案吗？这样的事情可能会奏效：

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

这是小提琴 http://jsfiddle.net/Bobyo/aXgAV/

【讨论】：

这个解决方案更容易/更可行吗？我喜欢 CSS 解决方案，它完成了这项工作。我知道转换在 IE 9 及更低版本上不起作用，但坦率地说，我并不真正关心 IE。
如果你不关心IE9及以下，最好使用css。我个人喜欢用 js 制作动画，但如果你不关心 xbrowser 兼容性，css 是一个不错且干净的解决方案