1

彼は父の新しい会社のウェブページに取り組んでいて、小さな問題に遭遇しました。私が作ったものは自分のコンピューターで見栄えがよく、アップロードすることにし、リンクを父に送りました。彼はボタンが間違っているなどと言ったので、彼は古いバージョンのウェブブラウザを持っています。これは、1 つのボタンの html & css コードです。

<div class="menu-g">

            <a href="genuine.html">
                <span class="menu-g-slide-text">Genuine</span>
                <img src="images/menug.png" alt="icon" />
            </a>
        </div>

.mid .menu .menu-g {
background: #e5e5e5;
height: 90px;
width: 170px;
display: inline-block;
position: relative;
border: 2px solid #e10613;
box-shadow: 
    0px 1px 1px rgba(255,255,255,0.8) inset, 
    1px 1px 3px rgba(0,0,0,0.2);
border-radius: 4px;
clear: both;
margin: 10px 0px;
overflow: hidden;
transition: box-shadow 0.3s ease-in-out;
left: 50px;


}

.mid .menu .menu-g img{
position: absolute;
left: 50px;
top: 5px;
border: none;
transition: all 0.3s ease-in-out;

}

.mid .menu .menu-g .menu-g-slide-text{
position: absolute;
font-size: 36px;
left: 20px;
color: #333;
opacity: 0;
text-shadow: 0px 1px 1px rgba(255,255,255,0.4);
transition: opacity 0.2s ease-in-out;
text-align: center;
vertical-align: middle;
line-height: 90px;  
}

.mid .menu .menu-g:hover{
box-shadow: 
    0px 1px 1px rgba(255,255,255,0.8) inset, 
    1px 1px 5px rgba(0,0,0,0.4); 
border-top: 7px solid #e10613;
border-bottom: 7px solid #e10613;
border-left: none;
border-right: none;
position: relative;
top: -5px;

}
.mid .menu .menu-g:hover img{
transform: scale(10);
opacity: 0;

}

.mid .menu .menu-g:hover .menu-g-slide-text {
opacity: 1;
text-align: center;
vertical-align: middle;
line-height: 90px;
}

.mid .menu .menu-g:active {
position: relative;
top: -2px;
background: #CCC;
box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;

}

古い W​​eb ブラウザーを使用しているユーザーがそのページにアクセスした場合、それがボタンに変更され、ボタンとしての単語が表示された単純な四角いボックスに変更されます。

どうすれば正確にそれを行うことができますか?

前もって感謝します & 親切なデイブ。

4

1 に答える 1

2

このエラーは、おそらくいくつかの CSS2/3 属性の使用から発生します。詳細については、このマトリックスと CSS3 追加リストを確認してください。

古い IE ブラウザー (IE5 など) をサポートする必要がある場合は、条件付きコメントを使用して代替 CSS を読み込むことができます。別の解決策は、上記のコメントでも示唆されているように、Modernizrを使用した機能検出です。

更新:このライブラリは、古い Internet Explorer で作業する際の苦痛を軽減する可能性があります。

とにかく、私はあなたのお父さんにブラウザを最新の安全なものに更新することを強くお勧めします.

さらに、イメージはコンテンツではなくプレゼンテーションの一部であるため、イメージをディゾルブしspanて CSSプロパティに配置します。background

于 2013-05-05T12:29:15.590 に答える