Question

想知道我的脚本是否错误或者我是否遗漏了CSS中的内容。除了我的IE 9浏览器 - 版本9.0.8112.16421之外，它在所有方面都运行良好。我认为它的盒子方向会弄乱它，但我认为html5shiv会有所帮助吗？

这是我的头脑HTML：

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8"> 
<link rel="apple-touch-icon" href="/apple-touch-icon.png"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>US Fire Registry</title>
<!--update based on html5-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta name="viewport" content="width=device-width, maximum-scale=1.0"/>
<meta name="description" content="Fire Registry" />    
<meta content="fire registry volunteer firefighters" />
<link REL="SHORTCUT ICON" HREF="/favicon.ico"> 
<link href="http://www.usfireregistry.com/css01.css" rel="stylesheet" type="text/css" />
</head>

Html for nav:

     <nav>

        <a href="index.html" id="selected">Home </a>
        <a href="registry.html">Firefighter Registry </a>
        <a href="agency.html">Agency Honors </a>
        <a href="auxilary.html">Auxilary Honors </a>
        <a href="training.html">Training Project </a>
        <a href="showcase.html">Equipment Showcase </a>
        <a href="store.html">Store </a>
      </nav>




And CSS:

nav {
    background-color: #992017;
    /* Safari, Opera, and Chrome */
    display: -webkit-box;
    -webkit-box-orient:horizontal;
    /* Firefox */
    display:-moz-box;
    -moz-box-orient:horizontal;
    /* W3C */
    display:box;
    box-orient:horizontal;
        -webkit-border-radius:0px;
    /*IE*/
    -ms-box-orient:horizontal;
    width: 975px;
    margin: 0 auto;
    position: relative;
    top: 40px;
    opacity: 1;
    z-index: 60;
}

nav a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #FFF;
    display: block;
    padding: 10px;
    -moz-box-flex:1.0; /* Firefox */
    -webkit-box-flex:1.0; /* Safari and Chrome */
    -ms-box-flex:1.0;
    box-flex:1.0;
    text-align: center;
    -webkit-transition:all .4s linear;
    -o-transition:all .4s linear;
    -moz-transition:all .4s linear;
    transition:all .4s linear;
}

Answer 1

“Shiv”脚本将允许旧版本的IE（7,8）将HTML 5元素视为现代浏览器对待它们。此脚本不允许CSS 3属性在不支持它们的浏览器中生效。

在不支持它的浏览器中使用新的display: box;值（IE 9）就是问题所在。 -ms前缀适用于IE 10而不是9 ..我还建议等到 CSS Flexible Box Layout 模块接近推荐阶段 - 它当前正在修订中，事情可能会随着它接近完成。

如何让我的html5 <nav>在IE 9中正常工作？</nav>

1 个答案: