Question

我正在开发自己的网站，其中一个“功能”就是当我用鼠标滑过标题时，它会向下滑动。

这适用于所有主流浏览器。但是，对于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中工作，而是在其他主要浏览器上工作的帮助。

Answer 1

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

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

另外，请确保在文档类型之前没有额外的空格，这可以通过在PHP中回显文本的方式引入。

Answer 2

给定的示例根本没有doctype。如果没有有效的doctype，任何版本的IE都会有效地变成IE5.5。

另外，在调试任何HTML / CSS / Javascript问题时忘记PHP。浏览器不关心您生成的标记是什么，他们只看到您可以通过单击“查看源”菜单看到的结果HTML代码。

Answer 3

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

看到你的评论，我认为JSFiddle正在向页面添加一些东西，比如normalize.css。

Answer 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/

转换不在IE中工作

4 个答案: