0

父の Web サイトの新しい Web プロジェクトが終わりに近づいていますが、IE で開いた後、橋から飛び降りたいと思っています。

他のブラウザーと比較して、IE でサイトがどのように表示されるかを示す 2 つのスクリーンショットを添付しました。何らかの奇妙な理由で、ページ コンテンツをスライダーの下に押し込んでいます。

IE では、次のようにレンダリングされます: http://cl.ly/JVgZ

他のブラウザでは、次のように期待どおりにレンダリングされます: http://cl.ly/JVgo

（申し訳ありませんが、初心者なので画像を直接投稿することはできません-.-）

ご覧のとおり、濃い灰色のテキスト領域全体がスライダーの下に隠れています。

これは CSS に関連していると想定しています。スライダーのコードは次のとおりです。

body { }
.panel h2.title { }
/* Most common stuff you'll need to change */

.coda-slider-wrapper { }
.coda-slider {  padding-bottom: 0px;  padding-top: 0px;  background-color: #262626;  }

/* Use this to keep the slider content contained in a box even when JavaScript is disabled */
.coda-slider-no-js .coda-slider { overflow: auto !important; }

/* Change the width of the entire slider (without dynamic arrows) */
/* Change margin and width of the slider (with dynamic arrows) */
.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 1280px }

/* Arrow styling */
.coda-nav-left a, .coda-nav-right a { }

/* Tab nav */
.coda-nav ul li a.current { 
color: white;
height: 60px; 
z-index: 9999;
position: relative;
}

.coda-nav ul li a.current:before {
    content: '';

    position: absolute;
    height: 0;
    width: 0;
    bottom: 2px;
    left: 50%;
    margin-left: -9px;
    z-index: 9999;


    border: 10px solid transparent;
    border-top: 10px solid #303030;
    border-bottom: none;
}


/* Panel padding */
.coda-slider .panel-wrapper { }

/* Preloader */
.coda-slider p.loading { text-align: center }

/* Tabbed nav */
.coda-nav ul { margin-left: 167px; margin-top: 0px; margin-bottom: 0px; clear: both; display: block; overflow: hidden;}
.coda-nav ul li { display: inline }
.coda-nav ul li a { letter-spacing: 0.5px; margin-right: 30px; text-align: center; font-size: 20px; font-family: FreightSansBook; color: #bfbfbf; display: block; float: left; text-decoration: none }


.coda-nav ul li a:hover { letter-spacing: 0.5px; margin-right: 30px; text-align: center; font-size: 20px; font-family: FreightSansBook; color: white; display: block; float: left; text-decoration: none }

/* Miscellaneous */
.coda-slider-wrapper { clear: both; overflow: auto }
.coda-slider { float: left; overflow: hidden; position: relative }
.coda-slider .panel { display: block; float: left }
.coda-slider .panel-container { position: relative }
.coda-nav-left, .coda-nav-right { display: none; }
.coda-nav-left a, .coda-nav-right a { display: none; }
p { color: #bfbfbf; }

誰かが私を救ってくれることを願っています！

お忙しい中、ご協力いただきありがとうございました。

編集:このコードは、セクションの HTML ドキュメントにも存在します...

<!--[if IE]>
    <style type="text/css">
     .timer { display: none !important; }
     div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }
     #sliderarea {position: absolute !important; margin-top: 0px !important;}
     div.orbit-wrapper {margin-top: -140px !important; position: absolute !important;}
    </style>
    <![endif]-->
4

1 に答える 1

0

問題はあなたのクリアフィックステクニックにあると思います。「クリアフィックス」とは、フロート要素の通常のゼロの高さではなく、スライダーなどのフロート要素に外部から見える高さを与えるものです。clearfixはほとんどのブラウザで機能しますが、IEでは機能しません。

クリアフィックスのメソッドについて、この回答で説明されているクリアフィックスの代替メソッドを試してください。たぶん、それらの他の方法はあなたの現在の方法よりもうまくいくでしょう。clearfixルールがvisual-displayルールと混在しているため、現在の方法がわかりません。その答えの上部にあるマイクロクリアフィックスから始めます。

/* For modern browsers */
.coda-nav ul li a.current:before,
.coda-nav ul li a.current:after {
    content:"";
    display:table;
}
.coda-nav ul li a.current:after {
    clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.coda-nav ul li a.current {
    zoom:1;
}

clearfixがオーバーライドする既存のコードのルールをすべて削除します。

于 2012-09-17T21:09:55.413 に答える