Question

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

上的示例

Modernizer dint修复问题可能是我做错了或者我需要使用jquery使其工作

CODE

<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支持内联元素的内联块属性，例如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 does not understand display: inline-block

更多资源

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

IE 7中的CSS菜单中断

1 个答案: