4

我需要使此脚本适用于 IE 7，因为此导航菜单基于 CSS3，它在使用现代化工具后在 IE 7 中完全中断。

小提琴的例子

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>
4

1 回答 1

3

IE6 和 IE7 支持内联元素的 inline-block 属性，例如 span、anchor 等，所以如果我们需要将其应用于像 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不理解显示：inline-block

更多资源

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

于 2013-10-03T16:45:01.033 回答