Question

我已经从我的html文件中规定了所有额外的代码，但是无法让IE11上的转换工作，请帮忙，我添加了特殊的元标记，但也没有解决问题。

代码在chrome，mozilla，opera中完全正常，但不是血腥的IE11。请帮忙，我花了一整天的时间来解决这个问题，我感觉真的很蠢（也许我很天意），为www.wood-floor-experts.com设计了菜单，它在IE11中完美运行但是这段代码不起作用，就是这样吧不管我做什么。

<!DOCTYPE html>
<html lang="en-GB" prefix="og: http://ogp.me/ns#">
    <head>
        <title></title>
        <meta http-equiv="x-ua-compatible" content="IE=edge" >
        <style type="text/css">
            .nav_cont {
              width: 100%;
              z-index: 1000;
            }

            .toggle_cont {
              display: block;
              text-align: center;
              background: transparent;
            }

            .togle_btn {
              border: none;
              width: 80px;
              padding: 20px;
              background-color: rgba(132, 128, 136, 0.75);
              z-index: 500;
              cursor: pointer;
              -moz-border-radius-bottomleft: 5px;
              -webkit-border-bottom-left-radius: 5px;
              border-bottom-left-radius: 5px;
              -moz-border-radius-bottomright: 5px;
              -webkit-border-bottom-right-radius: 5px;
              border-bottom-right-radius: 5px;
              text-align: center;
            }

            .togle_bar {
              background-color: #fff;
              display: table;
              margin: 0 auto;
              width: 30px;
              height: 1px;
              border-radius: 1px;
            }

            .togle_bar + .togle_bar {
              margin-top: 3px;
            }

            .nav_cont {
              z-index: 1000;
            }

            .nav_cont ul {
              background: rgba(0, 0, 0, 0.4);
              display: block;
              overflow: hidden;
              max-height: 0;
              -moz-transition: max-height, 0.5s, ease-in-out;
              -o-transition: max-height, 0.5s, ease-in-out;
              -webkit-transition: max-height, 0.5s, ease-in-out;
              transition: max-height, 0.5s, ease-in-out;
            }

            .nav_cont ul li {
              position: relative;
              display: block;
              text-align: center;
            }

            .nav_cont ul li a {
              display: block;
              text-decoration: none;
              padding: 15px;
            }

            .nav_cont ul li a:hover {
              color: #fff;
            }

            .nav_cont ul li ul {
              height: 104px;
              max-height: 0;
            }

            .nav_cont ul li.shown ul {
              max-height: 104px;
            }

            .nav_cont ul.shown {
              max-height: 416px;
            }
        </style>
    </head>
    <body>
    <!-- Navigation============================================================= -->
    <nav class="nav_cont">
         <ul id="menu-main-navigation" class="nav nav_bg">
             <li class="active"><a title="Home" href="#">Home</a></li>
                <li class="dropdown"><a title="Products" href="#">Products</a>
                    <ul role="menu" class="dropdown-menu">
                        <li><a title="Doors" href="#">Doors</a></li>
                        <li><a title="Windows" href="#">Windows</a></li>
                    </ul>
                </li>
            <li><a title="Services" href="#">Services</a></li>
            <li><a title="Portfolio" href="#">Portfolio</a></li>
            <li><a title="About Us" href="#">About Us</a></li>
            <li><a title="Contacts" href="#">Contacts</a></li>
        </ul>               
        <div class="toggle_cont">
            <button type="button" class="togle_btn">
                <span class="togle_bar"></span>
                <span class="togle_bar"></span>
                <span class="togle_bar"></span>
            </button>
        </div>
    </nav>
<!-- Footer ================================================================ -->
        <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
        <script type='text/javascript'>
            jQuery(document).ready(function($) {

              $('.dropdown').click(function() {
                $(this).toggleClass('shown');
              });

              $('.togle_btn').click(function() {
                $('ul.nav').toggleClass('shown');
              });
        });
        </script>
    </body>
</html>

Answer 1

您不需要使用逗号：

transition: max-height, 0.5s, ease-in-out;

使用：

transition: max-height 0.5s ease-in-out;

其他供应商前缀也是如此。

无法过渡到IE11

1 个答案: