【问题标题】：Website displays in chrome perfectly, but not in mozilla or IE网站在 chrome 中完美显示，但在 Mozilla 或 IE 中不显示
【发布时间】：2014-08-18 22:36:20
【问题描述】：

这里是 html 和 css 的代码 sn-ps。它可以在 Google chrome 中找到，但是当我尝试在 mozilla 或 IE 中显示它时，它会显示完全不同的东西。我无法附加图像，因为我没有所需的声誉。我真的很感激帮助。谢谢！

HTML

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <link rel="stylesheet" type="text/css" href="style.css">
 <link rel="shortcut icon" href="ak.png">
  <title>Home</title>
</head>
<body>
        <div class="Nav">
            <nav>
                <ul class="navigation fade-in2">
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#portfolio">Portfolio</a></li>
                    <li><a href="#shop">Shop</a></li>
                    <li><a href="#blog">Blog</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
        </div>
        <div class="logo"><a href="#home"><img class="ak fade-in2" src="ak.png"></a></div>

    <div class="background"><img class="beauty" src="beauty.jpg"></div>
    <div class="header">
        <h1 class="headerName fade-in">DESIGN | DEVELOP | BRAND</h1>
        <h4 class="service fade-in3"><a href="#portfolio">VIEW PORTFOLIO</a></h4>
        <h4 class="service fade-in3"><a href="#services">VIEW SERVICES</a></h4>
    </div>
    <!--<div class="mainbody"><p>safsdaf</p></div>-->
</body>
</html>

CSS

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

* {
    padding: 0;
    margin: 0;
}

li {
    display: inline;
    font-size: 15px;
    font-family: verdana;

}

nav {
    width: 100%;
    text-align: right;
    background-color: #222222;
    padding: 0;
    margin: 0px;
    line-height: 47px;
    position: fixed;
    z-index: 100;
}


.ak{
    width: 90px;
    height: 55px;
    z-index: 101;
    position: fixed;
    background: transparent;
    color: transparent;
    background-color: transparent;
}


.Nav a{
    text-decoration: none;
    padding: 15px;
}

.Nav a:link{
    color: #A7A7A7;

}

.Nav a:visited{
    color: #A7A7A7;

}

.Nav a:hover{

    color: #DBDBDB;
    transition: all 0.3s ease-out 0s;
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
    transition-delay: 0s;
}

.header {

    background-color: rgba(0,0,0, 0.25);
    width: 100%;
    height: 626px;
    text-align: center;
    position: fixed;
    z-index: 10;
}


.background {
    position: fixed;
    z-index: 8;



}

.beauty {
    width: 100%;
    height: 626px;

}


.headerName {
    font-size: 2.5em;
    text-align: center;
    color: #D3D3D3;
    padding: 180px;
    padding-bottom: 50px;
    margin: 0px;
    letter-spacing: 4px;
    font-weight: 100;
    font-family: 'Lato', sans-serif;
}



.fade-in {
    opacity:0;  /* make things invisible upon start */
    -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animation ease-in and repeat it only 1 time */
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;

    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;

    -webkit-animation-delay: 0.3s;
    -moz-animation-delay:0.3s;
    animation-delay: 0.3s;
}

.fade-in2 {
    opacity:0;  /* make things invisible upon start */
    -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animation ease-in and repeat it only 1 time */
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;

    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;

    -webkit-animation-delay: 0.6s;
    -moz-animation-delay:0.6s;
    animation-delay: 0.6s;
}

.fade-in3 {
    opacity:0;  /* make things invisible upon start */
    -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animation ease-in and repeat it only 1 time */
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;

    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;

    -webkit-animation-delay: 0.9s;
    -moz-animation-delay:0.9s;
    animation-delay: 0.9s;
}

.service{
    font-size: 14px;
    width: 190px;
    text-align: center;
    font-family: 'Lato', sans-serif;
    color: #D3D3D3;
    border: 2px #A7A7A7 solid;
    border-color: rgba(255, 255, 255, 0.5);
    display: inline-block;
    border-radius: 5px;
    background-color: transparent;
    letter-spacing: 2px;



}



.service a{
    text-decoration: none;
    display: block;
    padding: 15px 20px;
}

.service a:link{
    color: #D3D3D3;

}

.service a:visited{
    color: #D3D3D3;

}

.service a:hover{
    background-color: rgba(255, 255, 255, 0.15);
    transition: background-color .15s ease-in;
    -webkit-transition: background-color .15s ease-in;
    -moz-transition: background-color .15s ease-in;
    -o-transition: background-color .15s ease-in;
}

更新 1：我更新了两个浏览器，似乎 css3 动画在两个浏览器上都运行良好。问题似乎是页面的定位

更新 2：这里是不同浏览器屏幕截图的链接

铬：https://www.dropbox.com/s/jlpa4vu51kdnews/Chrome.JPG

InternetExplorer：https://www.dropbox.com/s/zbchs3su9ahxr0n/IE.JPG

Mozilla Firefox：dropbox(.)com/s/fyalnhsha9ktadz/Mozilla.JPG（我无法发布第三个链接，因为我没有足够的声誉）

--- 请注意，在 chrome 中，左上角的徽标看起来很平滑，而其他两个则不那么平滑。我相信这些图片是不言自明的。

【问题讨论】：

在此处发布指向您的屏幕截图的链接，有人会将它们嵌入您的问题中
除了 chrome 之外，还有谁用过？
@NoahHerron Firefox 仍然非常受欢迎，原因有很多
@NoahHerron 只有 60% 的总用户 :(
@NoahHerron 在中国，很多不懂电脑的人还在用IE6。:(

标签： html css google-chrome

【解决方案1】：

这是我的JSFiddle。这是你想要的吗？

只需更改 css 文件的第一行。

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

【讨论】：

嗯，抱歉，我在发布问题时似乎是一个错误，我的代码一开始就是这样。不过谢谢，问题不在于动画，而是不同代码块的位置

【解决方案2】：

IE8 及更早版本的问题

IE8 和更早版本不知道如何在它无法识别的元素上呈现 CSS。您不能为新的 HTML5 元素设置样式，例如 header、nav、section

但 HTML 5 shiv javascript 文件用于在 9 版之前的 Internet Explorer 版本中启用 HTML5 元素的样式。

您可以从http://code.google.com/p/html5shiv/下载它

要启用 HTML5 Shiv（下载后），请在元素中插入以下代码：

<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->

【讨论】：

好吧，我使用的是更高版本的 IE，所以情况并非如此
@AtharulKhan 我只想说，如果您希望 HTML5 标签在旧版本的 IE 中工作。您可以使用上述解决方案。