Question

我把一些代码拼凑在一起并制作了一个滑动式水平下拉导航栏，但问题是虽然它适用于chrome和firefox，但它在Internet Explorer中无法工作。这是代码。我非常感谢所有人的帮助。

＆＃13;

$(function () {

  $(".item").on("click", function () {
    $(this)
      .next().toggleClass("active");
  });
  
  $("#body").css("min-height", "100%");

  
});

＆＃13;

section {
  width: 150%;
  margin: 0px auto;
  margin-left:-15px;
  font-family: Raleway, sans-serif;

}
.item{
  font-size: calc(8px + .8vw);
  width:9%; 
  height: 40px;
  float: left;
  border-right: 3px solid #333333;
  font: monospace;
  padding: 10px;
  cursor: pointer;
  background-color: #B9E3C6;
  transform: skew(-20deg);
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  text-align: center;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  font-family: Raleway, sans-serif;

}

.info{
  font-size: calc(8px + .8vw);
  float: left;
  width:0%;
  height: 40px;
  background: #DEF9E3;
  visibility: hidden;
  font: monospace;
  background-color: gr;
  transform: skew(-20deg);
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  text-align: center;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  transition: width ease-out .3s, visibility ease-out .3s;
  white-space: nowrap;
  overflow:hidden;
  padding: 10px 0;
  font-family: Raleway, sans-serif;

}
.info.active{
  visibility: visible;
  width:12%;
  font-family: Raleway, sans-serif;

  
}
.nitem{
  font-size: calc(8px + .8vw);
  width:9%; 
  height: 40px;
  float: left;
  border-right: 3px solid #333333;
  font: monospace;
  padding: 10px;
  cursor: pointer;
  background-color: #B9E3C6;
  transform: skew(-20deg);
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  text-align: center;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  font-family: Raleway, sans-serif;
}

＆＃13;

  <section>
	  <div class="item"> about <span style='font-size: 1.3vw;'>►</span></div>
	  <div class="info">lab  |  research</div>

	  <div class="item"> people <span style='font-size: 1.3vw;'>►</span></div>
	  <div class="info">current  |  alumni</div>
	  
	  <div class="nitem"> publications</div>
	 
	  <div class="nitem"> contact</div>
	  </section>
	</div>
  
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script src="js/index.js"></script>

＆＃13;

Answer 1

使用Internet Explorer时，您需要对其进行一些约束，否则它将以心碎结束。

使用适当的doctype（尽管有很多doctypes）：＆lt;！DOCTYPE HTML PUBLIC“ - // W3C // DTD HTML 4.01 Transitional // EN”“https://www.w3.org/TR/html4/loose.dtd”＆gt;

然后在doctype正下方添加以下行：

＆lt; meta http-equiv =“X-UA-Compatible”content =“IE = EmulateIE10”/＆gt;

上面的元标记确保IE为每个用户加载相同的版本，无论他们实际安装了什么webbrowser。我喜欢加载IE10。

您还应该查看http://jqueryui.com/并查看他们提供的酷炫装饰品，以帮助您提供信息。

希望有所帮助。

下拉菜单在Internet Explorer

1 个答案: