4

このナビゲーション メニューは CSS3 に基づいているため、このスクリプトを IE 7 で機能させる必要があります。モダナイザーを使用すると、IE 7 では完全に機能しなくなります。

フィドルの例

Modernizer Dint fixの問題は、私が何か間違ったことをしたか、jqueryを使用して機能させる必要があるのか​​もしれません

コード

<div class="main-wrapper">
    <div class="menu-wrapper">
        <nav class="nav-wrapper">
            <ul class="nav">
                <li><a href="#">Menu One</a>

                    <div class="dropdown">
                        <ul>
                            <li><a href="#">Sub menu one</a>

                                <div class="dd-panel">
                                    <img class="media" src="http://lorempixel.com/200/160/animals/" alt="image" />
                                    <p class="media-caption"><strong>Menu one - sub menu one</strong>Aliquam erat volutpat. Quisque porta varius tortor, ac luctus lorem condimentum vel. Mauris venenatis justo id fringilla tincidunt.</p>
                                </div>
                            </li>
                            <li><a href="#">Sub menu two</a>

                                <div class="dd-panel">
                                    <img class="media" src="http://lorempixel.com/200/160/" alt="image" />
                                    <p class="media-caption"><strong>Menu one - sub menu two</strong>Aliquam erat volutpat. Quisque porta varius tortor, ac luctus lorem condimentum vel. Mauris venenatis justo id fringilla tincidunt.</p>
                                </div>
                            </li>
                            <li><a href="#">Sub menu three</a>

                                <div class="dd-panel">
                                    <img class="media" src="http://lorempixel.com/200/160/business/" alt="image" />
                                    <p class="media-caption"><strong>Menu one - sub menu three</strong>Aliquam erat volutpat. Quisque porta varius tortor, ac luctus lorem condimentum vel. Mauris venenatis justo id fringilla tincidunt.</p>
                                </div>
                            </li>
                            <li><a href="#">Sub menu four</a>

                                <div class="dd-panel">
                                    <img class="media" src="http://lorempixel.com/200/160/people/" alt="image" />
                                    <p class="media-caption"><strong>Menu one - sub menu four</strong>Aliquam erat volutpat. Quisque porta varius tortor, ac luctus lorem condimentum vel. Mauris venenatis justo id fringilla tincidunt.</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </li>
                <li><a href="#">Menu Two</a>

                </li>
                <li><a href="#">Menu Three</a>
<div class="triangle"></div>
                    <div class="dropdown">
                        <ul>
                            <li><a href="#">sample link</a>

                            </li>
                            <li><a href="#">sample link</a>

                            </li>
                            <li><a href="#">sample link</a>

                            </li>
                            <li><a href="#">sample link</a>

                            </li>
                        </ul>
                    </div>
                </li>
                <li><a href="#">Menu Long Three</a>

                </li>
                <li><a href="#">Menu Four &amp; Long</a>
<div class="triangle"></div>
                    <div class="dropdown">
                        <ul>
                            <li><a href="#">Sub menu inner</a>

                                <div class="dd-panel">
                                    <img class="media" src="http://lorempixel.com/200/160/animals/" alt="image" />
                                    <p class="media-caption"><strong>Menu Four &amp; Long - sub menu inner </strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam turpis magna, condimentum sit amet interdum quis, gravida accumsan risus. Donec vulputate dolor in turpis ornare, sed dictum ligula pretium. Nullam sed dolor mollis magna auctor porttitor. Duis sem sem, pretium non lorem vitae, lacinia eleifend ligula. Aliquam ipsum erat, gravida eget hendrerit in, fermentum vel odio. Aliquam erat volutpat. Quisque porta varius tortor, ac luctus lorem condimentum vel. Mauris venenatis justo id fringilla tincidunt.</p>
                                </div>
                            </li>
                            <li><a href="#">Sub menu two</a>

                                <div class="dd-panel">
                                    <img class="media" src="http://lorempixel.com/200/160/animals/" alt="image" />
                                    <p class="media-caption"><strong>Menu one - sub menu one</strong>Aliquam erat volutpat. Quisque porta varius tortor, ac luctus lorem condimentum vel. Mauris venenatis justo id fringilla tincidunt.</p>
                                </div>
                            </li>
                            <li><a href="#">Sub menu three</a>

                                <div class="dd-panel">
                                    <img class="media" src="http://lorempixel.com/200/160/animals/" alt="image" />
                                    <p class="media-caption"><strong>Menu one - sub menu one</strong>Aliquam erat volutpat. Quisque porta varius tortor, ac luctus lorem condimentum vel. Mauris venenatis justo id fringilla tincidunt.</p>
                                </div>
                            </li>
                            <li><a href="#">Sub menu four</a>

                            </li>
                            <li><a href="#">Sub menu having long texxt</a>

                                <div class="dd-panel">
                                    <img class="media" src="http://lorempixel.com/200/160/animals/" alt="image" />
                                    <p class="media-caption"><strong>Menu one - sub menu one</strong>Aliquam erat volutpat. Quisque porta varius tortor, ac luctus lorem condimentum vel. Mauris venenatis justo id fringilla tincidunt.</p>
                                </div>
                            </li>
                            <li><a href="#">Sub menu lorem ipsum dolor sit amet</a>

                            </li>
                            <li><a href="#">Sub menu three consectqtero</a>

                                <div class="dd-panel">
                                    <img class="media" src="http://lorempixel.com/200/160/animals/" alt="image" />
                                    <p class="media-caption"><strong>Menu one - sub menu one</strong>Aliquam erat volutpat. Quisque porta varius tortor, ac luctus lorem condimentum vel. Mauris venenatis justo id fringilla tincidunt.</p>
                                </div>
                            </li>
                            <li><a href="#">Sub menu four</a>

                            </li>
                        </ul>
                    </div>
                </li>
                <li><a href="#">Menu </a>

                    <div class="dropdown">
                        <ul>
                            <li><a href="#">sample link</a>
                            </li>
                            <li><a href="#">sample link</a>
                            </li>
                            <li><a href="#">sample link</a>
                            </li>
                            <li><a href="#">sample link</a>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </nav>
    </div>
    <img width="1000px" src="http://photorepairshop.com/Pages/Panoramic_Photo3.jpg" alt="image">
</div>
4

1 に答える 1

3

IE6 と IE7 は、スパン、アンカーなどのインライン要素で inline-block プロパティをサポートしているため、これを li などのブロック要素に適用する必要がある場合は、haslayout をトリガーする必要があります。

ステップ1）

条件付きコメントを使用して IE 8 未満のブラウザーにのみ lt-ie8 クラスを適用し、これらのブラウザーにのみ CSS が適用されるようにします。

<!--[if lt IE 8]> <html class="lt-ie8"> <![endif]-->

ステップ2）

このcssを追加して、

.lt-ie8 .nav > li {
    *display:inline;
    zoom:1;
}

同様の質問はここにあります

IE7 は表示を認識しません: インライン ブロック

より多くのリソース

http://uncorkedstudios.com/blog/how-to-fix-the-ie7-and-inlineblock-css-bug

于 2013-10-03T16:45:01.033 に答える