3

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

这适用于所有主要浏览器。但是，对于 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 中不工作，但在其他主要浏览器上工作的任何帮助，将不胜感激。

4

4 回答 4

11

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

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

此外，请确保您在 PHP 中回显文本的方式可能引入的 doctype 之前没有多余的空格。

于 2013-07-09T21:30:50.713 回答
1

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

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

于 2013-07-09T21:52:32.627 回答
0

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

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

于 2013-07-09T21:31:11.680 回答
0

你试过像 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/

于 2013-07-09T22:04:44.147 回答