1

我正在为我的网站使用基于本教程的响应式菜单。

目前我只使用非响应功能并且在 FF、Chrome 和 IE 9 中运行良好，但在测试期间（F12）在 IE 8 标准视图中中断。

我正在使用以下 css 并在jsfiddle上设置了一个示例，也直接链接到 jsfiddle 框架在这里

当我使用相同的 css 时，实际教程不会在 IE 8 中中断，但由于某种原因它仍然会中断。

我已经对此进行了很长一段时间的故障排除，但到目前为止我无法解决此问题。

我将不胜感激。

HTML

<!-- main Container -->
<div class="main-wrapper">
    <!-- Header -->
    <div class="header-wrapper">

        <!-- Menu -->
        <div class="menu-wrapper">
            <div class="navbar">                             
                    <nav id="menu" class="menu">
                        <ul>
                        <li><a href="en/1/1/Home">Home</a></li>
                        <li class="has-submenu"><a href="#">Chairman</a>
                            <ul class="has-submenu">
                                <li><a href="en/page/1/3/">Parent Menu</a></li>
                                <li><a href="en/page/1/4/">Child Menu</a></li>
                                <li><a href="en/page/1/5/">Child Menu</a></li>
                                <li><a href="en/page/1/6/">Child Menu</a></li>
                            </ul>
                        </li>
                        <li><a href="en/page/1/7/">Parent menu</a></li>
                        <li class="has-submenu"><a href="#">Parent Menu 2</a>
                            <ul class="has-submenu">
                                <li><a href="en/page/1/9/">Child Menu 2</a></li>
                                <li><a href="en/page/1/10/">Child Menu 2</a></li>
                            </ul>
                        </li>
                        <li><a href="en/page/1/25/">Contact</a></li></ul>  
                    </nav>                                       
           </div>
        </div>
        <!-- Menu -->
     </div>
     <!-- Header -->

</div>
<!-- main Container -->

CSS

.menu-wrapper
{
    height:30px;
}
.navbar
{
    background-color:Green;
    margin-left:250px;
}


/* CSS FOR MENU */
.menu  
{ 
    /*  font-family:'Open Sans', sans-serif; font-family: 'Roboto', sans-serif;*/
    font-size:13px;
    font-weight:400;
    color: #687074;
    float: left; 
    max-width: 60em;
    border:0px solid red;

}
.menu ul  
{
    z-index:500;
    padding: 0px;
    margin: 0px;
    list-style: none;
    position: relative;
    display: inline-table;
}
.menu > li > ul.sub-menu {
    min-width: 10em;
    padding: 4px 0;
    background-color: #f4f4f4;
    border: 0px solid #CCC;
    border: 0px solid rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;

}
.menu ul:after {
    content: ""; clear: both; display: block;
}
.menu ul li {
    padding: 0px;
}
.menu > ul > li { 
    display: inline-block;
}
.menu ul li a { 
    display: block;
    text-decoration: none;
    color: #687074; /* link color*/
}
.menu ul li a:hover { 
    display: block;
    text-decoration: none;
    color: #028F41; /* link color hover*/
}
.menu ul li > a  
{
    color:#687074;
    padding: 5px 12px;  
}
.menu ul ul { 
    display: none; 
    position: absolute; 
    top:100%;
    min-width: 160px;
    border: 0px solid #CCC;
    border: 0px solid rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.menu ul li:hover > ul {
    display: block;
}
.menu ul ul > li {
    position: relative;
}
.menu ul ul > li a {
    padding: 5px 15px 5px 10px;
    height: auto;
    background-image:url("../images/nav-dd-background.png"); 
    color:#000;
    /*-webkit-transition: background-color 0.2s ease-out;  
    -moz-transition: background-color 0.2s ease-out;
    -ms-transition: background-color 0.2s ease-out;
    -o-transition: background-color 0.2s ease-out;
    transition: background-color 0.2s ease-out; */
}
.menu ul ul > li a:hover {
    background-color: #028F41; /* hover background color background-color: rgba(174, 92,16, 0.9);*/
    color: #000;
}
.menu ul ul ul {
    position: absolute; 
    left: 100%; 
    top:0;
}
    /* Code to create TRIANGLE POINTER */
    .menu ul ul li:first-child > a:after {
        content: '';
        position: absolute;
        left: 10px;
        top: -5px;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid #0A8F36;
        opacity:0.6;
    }

更新：问题已通过使用 HTML Shiv JS 解决

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
4

0 回答 0