4

どういうわけか、私の水平メニューはIE8（そしておそらく以前のバージョンも）では本当にひどく見えます（最初の写真を参照）。最新バージョンのサファリ、Firefox、クロームでは問題ありません（2番目の写真を参照）。これを修正する理由と方法はありますか？サイトリンクhttp://goo.gl/nEx5e ありがとう

IE8の問題

見た目どおりのメニュー

CSSコード：

#nav
{
    right:2%;
    list-style:none;
    position:fixed;
    /* float:right; */
    top:30px;
    z-index:1000;
    /* width:520px; */
}

#nav > li {
    display: inline-block;
    /* dirty hack for IE7 */
    *display: inline;
    *zoom: 1;
}

#nav a
{
    float:left;
    top:30px;
    display:inline-block;
    font-size:11px;
    margin-left:5px;
    margin-right:5px;
    padding-left:10px;
    padding-right:10px;
    text-decoration:none;
    height:24px;
    color:#666;
    line-height:24px;
    text-align:center;
    box-shadow:1px 1px 2px rgba(0,0,0,0.2);
    background:rgba(255,255,255,0.9);
    text-transform:uppercase;
}

#nav a:hover
{
    background:#dedede;
}

#nav .current a
{
    background:#666;
    color:#ededed;
4

4 に答える 4

2

私の回答を読む前に、投稿した質問に対する回答を受け入れない場合、他の人があなたの質問に回答する可能性が低くなることを考慮する必要があります。これは一般的に失礼と見なされます。

さて...問題は、白いボタンの背景に透明度のあるRGBAを使用していることです。

IE8以下では、このような透明色は処理できません。とを使用して手動で透明度を設定する必要がありopacity: 0.xますfilter: Alpha(opacity='xx')。

opacity: 0.8に等しいことに注意してくださいfilter: Alpha(opacity=80)。

#nav a
{
    float:left;
    top:30px;
    display:inline-block;
    font-size:11px;
    margin-left:5px;
    margin-right:5px;
    padding-left:10px;
    padding-right:10px;
    text-decoration:none;
    height:24px;
    color:#666;
    line-height:24px;
    text-align:center;
    box-shadow:1px 1px 2px rgba(0,0,0,0.2);
    background: white;           // <------ !
    opacity: 0.8;                // <------ !
    filter: Alpha(opacity='80'); // <------ !
    text-transform:uppercase;
}
于 2012-07-28T08:21:02.327 に答える
0

Internet Explorer 8以前では、アルファ透明度をレンダリングできません。あなたはそれらのためにフォールバックを使用する必要があります（プレーン#fffは素晴らしいimoでしょう）

于 2012-07-28T08:27:49.793 に答える
0

IE8以下のバージョンでは、アルファ透明度をレンダリングできません。したがって、次のように使用できます。

div {
  background-color: #xxxxxx;
  background-color: rgba(x,x,x,x);
}

これはあなたを助けるかもしれませんhttp://css-tricks.com/ie-background-rgb-bug/

ブラウザサポートの場合：ここをクリック

于 2012-07-28T08:48:12.553 に答える
0

Internet Explorer 6〜8にはCSS3PIEを使用できます!!!

PIEにより、Internet Explorer 6-9は、最も便利なCSS3装飾機能のいくつかをレンダリングできるようになります。

ウェブサイトから：

CSSレベル3には、非常に強力なスタイリング機能がいくつか備わっています。丸みを帯びた角、ソフトドロップシャドウ、グラデーション塗りつぶしなど。これらは、魅力的なサイトを作成するためにデザイナーの友人が使用するのが大好きな種類の要素ですが、複雑なスプライト画像、余分な非セマンティックマークアップ、大規模なJavaScriptライブラリ、その他の素敵なハックなど、実装が難しく、時間がかかります。

IE 8への実装について詳しくは、http：//css3pie.com/をご覧ください。

不透明度については、アンダースホルムストロームfilterが言ったように、子ナビゲーション要素の背景が白のスタイルで使用できます。

filter: Alpha(opacity='80');
background: #fff;

お役に立てれば！:)

于 2012-07-28T09:07:33.520 に答える