Question

我有一个使用UL和LI元素创建的标准NAV菜单。现在在Chrome，Firefox和更新/最新版本的Internet Explorer上看起来都很好，但是尝试IE7（可能是8）并且右侧的搜索下降到主页按钮下方。虽然我知道我的代码适用于所有最新版本的浏览器，但如果用户使用旧版本，我不知道用什么CSS来导航菜单来解决这个问题。

我已经包含了下面的HTML和CSS以及正确的样式的屏幕截图，我知道的条件语句，但实际适当的代码使我的导航风格适合旧版本的IE是我所追求的。

实时网址 - http://bit.ly/1gC4JiA

UPDATE 这是我的客户看到的（他正在使用血腥的IE8，不会更新）： enter image description here

<nav>
      <ul>
        <li>
            <a href="/"><i class="fa fa-home"></i></a>
        </li>
                                    <li>
                <a href="#">Felt Bags</a>
                    </li>
                                    <li>
                <a href="#">Felt Accessories</a>
                    </li>
                                    <li>
                <a href="#">Canvas Collection</a>
                    </li>
                                    <li>
                <a href="#">Gadget Carriers</a>
                    </li>
                                    <li>
                <a href="#">Laptop Backpacks</a>
                    </li>
                                    <li>
                <a href="#">Travel Bags</a>
                    </li>
                    <li>
            <input type="text" value="" placeholder="Search" name="search" class="header-search" style="width: 120px;">
            <span class="button-search"></span>
        </li>
      </ul>
    </nav>

CSS

    /* Navigation Menu */

nav {
    font-size: 1.3em;
    margin-top: 40px;
    width: 990px;
}

nav ul li {
    display: inline;
    background: #929292; /* Old browsers */
    background: -moz-linear-gradient(top,  #929292 0%, #383838 99%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#929292), color-stop(99%,#383838)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #929292 0%,#383838 99%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #929292 0%,#383838 99%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #929292 0%,#383838 99%); /* IE10+ */
    background: linear-gradient(to bottom,  #929292 0%,#383838 99%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#929292', endColorstr='#383838',GradientType=0 ); /* IE6-9 */
    padding: 10px 8px 10px 8px;
    color: #fff;
    font-weight: bold;
    border-right: 1px solid #343434;
    border-left: 1px solid #8e8e8e;
}

nav ul li:hover, nav ul li.active {
    display: inline;
    background: #383838; /* Old browsers */
    background: -moz-linear-gradient(top,  #383838 1%, #929292 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#383838), color-stop(100%,#929292)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #383838 1%,#929292 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #383838 1%,#929292 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #383838 1%,#929292 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #383838 1%,#929292 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#383838', endColorstr='#929292',GradientType=0 ); /* IE6-9 */
    padding: 10px 8px 10px 8px;
    color: #fff;
    font-weight: bold;
}

nav ul li:first-child {
    border-top-left-radius: 5px;
    padding-top: 10px;
    background: #929292; /* Old browsers */
    background: -moz-linear-gradient(top,  #929292 0%, #383838 99%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#929292), color-stop(99%,#383838)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #929292 0%,#383838 99%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #929292 0%,#383838 99%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #929292 0%,#383838 99%); /* IE10+ */
    background: linear-gradient(to bottom,  #929292 0%,#383838 99%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#929292', endColorstr='#383838',GradientType=0 ); /* IE6-9 */
    padding: 10px 11px 10px 11px;
    color: #fff;
    font-weight: bold;
    border-right: 1px solid #343434;
    border-left: 1px solid #8e8e8e;
}

nav ul li:last-child {
    border-top-right-radius: 5px;
    border-right: none;
    padding-right: 85px;
    padding-left:72px;
    background: #929292; /* Old browsers */
    background: -moz-linear-gradient(top,  #929292 0%, #383838 99%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#929292), color-stop(99%,#383838)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #929292 0%,#383838 99%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #929292 0%,#383838 99%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #929292 0%,#383838 99%); /* IE10+ */
    background: linear-gradient(to bottom,  #929292 0%,#383838 99%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#929292', endColorstr='#383838',GradientType=0 ); /* IE6-9 */
}
nav ul li a,nav ul li a:hover,nav ul li a:active,nav ul li a:visited{color:#fff; text-decoration: none;}
nav ul li i {
    font-size: 1.5em;
}

Answer 1

尝试使用IE8

nav {
  font-size: 1.3em;
  margin-top: 40px;
  width: 990px;
  display: table\9; // add this
  margin-bottom: 5px\9; // add this
  // Hack to IE8 (using \9)
}

Answer 2

将您的nav元素显示为块级元素，因为如您所知，该元素在IE中不存在，并且当它由javascript创建时，默认情况下它显示为内联级元素

nav {

   display:block;

   font-size: 1.3em;
   margin-top: 40px;
   width: 990px;
}

并且，不要忘记，为IE '8和更低版本创建nav元素。

<!--[if lte IE 8]>
  <script>
    document.createElement("nav");
  </script>
<![endif]-->

IE用搜索打破导航菜单

2 个答案: