过渡在IE中不起作用 [英] 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.
这在所有主流浏览器上都很好用.但是，对于IE 10，事实并非如此.这是页面来源:
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>";
?>
这是包含的头文件:
<?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样式:
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;
}
我们将感谢您对过渡在IE中无法正常运行，但在其他主要浏览器上仍能正常工作提供的帮助.
Would appreciate any help as to why transitions are not working in IE, but working on other major browsers.
推荐答案
我怀疑问题可能是兼容模式.
I suspect the issue might be compatibility mode.
如果您没有适当的doctype声明作为文档的第一行，则IE将进入兼容模式，并且大多数功能将无法正常使用.确保您具有有效的文档类型(可以使用<!DOCTYPE html>)并将<meta http-equiv="X-UA-Compatible" content="IE=edge" />添加到文档<head>.
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>.
另外，请确保在文档类型之前没有多余的空格，您可以通过在PHP中回显文本的方式来引入该文档类型.
Also, make sure there is no extra whitespace before the doctype that could be introduced by the way you are echoing text in PHP.
这篇关于过渡在IE中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
