jquery - IE 7 中的 CSS 菜单中断

Question

我需要让这个脚本适用于 IE 7，因为这个导航菜单基于 CSS3，它在使用 modernizer 后在 IE 7 中完全崩溃。

关于 fiddle 的示例

Modernizer dint 修复问题可能是我做错了什么或者我需要使用 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>

Answer 1

IE6 和 IE7 支持内联元素的 inline-block 属性，例如 span、anchor 等，所以如果我们需要将它应用于像 li 这样的 block 元素，那么我们需要触发 haslayout

步骤 1)

通过使用条件注释，仅将 lt-ie8 类应用于 IE 8 以下的浏览器，以便 CSS 仅应用于这些浏览器

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

步骤 2)

添加这个css，

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

可以在这里找到类似的问题

IE7 does not understand display: inline-block

更多资源

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