0

想知道我的脚本是错误的还是我在 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;
}
4

1 回答 1

2

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

display: box;在不支持它的浏览器（IE 9）中使用新值是问题所在。前缀适用于 IE 10而-ms不是 9 .. 我还建议等到CSS 灵活框布局模块更接近推荐阶段 - 它目前正在修订中，随着它接近完成，情况肯定会发生变化。

于 2013-03-05T18:48:21.667 回答