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) で新しい値を使用すると、問題が発生します。-ms接頭辞は 9 ではなく IE 10 用です。また、CSS Flexible Box Layout モジュールが推奨段階に近づくまで待つことをお勧めします。現在は改訂中であり、完成に近づくにつれて状況が確実に変わる可能性があります。

于 2013-03-05T18:48:21.667 に答える