javascript - 搜索功能在 IE 中不起作用

Question

下面是我要修改的搜索功能的代码。出于某种原因，搜索图标和动画在 chrome 和 safari(除了 IE 之外，我只尝试过两个)中可以正常工作，但在 Internet Explorer 中不能正常工作。我看不出我的代码有什么问题。有谁知道我哪里出错了？任何帮助，谢谢。

<script>
//Search
$('#search').click(function() {
  $('.search-form').animate({right: 0}, 50);
  $('.search-popup').show();
  $('.search-bg').click(function() {
    $('.search-popup').hide();
    $('.search-form').animate({right: '-100%'}, 50);
  });
});
</script>

<style>
/*Body*/
body {
	font-family: "VSCO Gothic Book", Helvetica, sans-serif;
	background-color: #fefefe;
	padding-bottom: 3rem;}

/*Navigation Bar*/
.nav-bar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #fff;}
.nav-bar ul li {
    float: right;}
.nav-bar ul li a {
    display: block;
    color: #000;
    text-align: center;
    padding: 12px 16px;
    text-decoration: none;
    font-size:14px;
    font-family: "VSCO Gothic Book", Helvetica, sans-serif; 
  font-weight: 300;}
.nav-bar ul li a:hover {
  cursor:pointer;
  color:rgba(0,0,0,0.65);}
.vsco-logo {
  width:35px;
height:35px;}
  
/*Flex Container*/
.flex-container {
  display: flex;
  justify-content: center;
flex-wrap: wrap;}

/*News*/
.news {
  height:500px;
  width:100%;
  background-color:#fff;
  align-items:center;
}

/*Store*/
.store {
  height:500px;
  width:100%;
  background-color:#f9f9f9;
  align-items:center;
}

.search-button {
  float: left;
  margin-top:7px;
}

.search-button button {
  width: 1.1em;
  height: 1.1em;
    margin-top:3px;
  margin-left:15px;
  border-radius: 1em;
  border: 0.9px solid #000;
  content:"";
  background-color:transparent;
  display: block;
}

.search-button button:after {
  display: block;
  content: "";
  width: .09em;
  height: 0.6em;
  background-color: #000;
  transform:rotate(40deg);
  -ms-transform:rotate(40deg); 
  -moz-transform:rotate(40deg); 
  -webkit-transform:rotate(40deg); 
  margin-top: .7em;
  margin-left: -0.6em;}
.search-button button:hover{
  cursor:pointer;}
.search-button button:focus{
  outline:none;}

.search-popup {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
.search-bg {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0,);
}

.search-popup label {
  color: white;
}

.search-form {
  display: block;
  margin: 7em 4em;
  position: relative;
  right: -100%;
}

.form {
  position: relative;
}

.form input {
  outline: none;
  border-width: 0 0 1px 0;
  border-style: none none solid none;
  border-color: #dad6d5;
  background-color: transparent;
  width: 100%;
  padding: 1em 0;
  color: grey;
}

.form input:focus::-webkit-input-placeholder {
  opacity: 0;
}

.form input:focus::-moz-placeholder {
  opacity: 0;
}

.form input:-ms-input-placeholder {
  opacity: 0;
}

.form input:focus:-moz-placeholder {
  opacity: 0;
}

.form label {
  position: absolute;
  top: 25%;
  right: 0;
}
</style>

<!--Smooth Scrolling JavaScript!-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!--Search!-->
<div class="search-button">
  <button id="search"></button>
    <div class="search-popup">
      <div class="search-bg"></div>
      <div class="search-form">
        <form action="">
          <div class="form">
            <input type="text" id="search" placeholder="VSCO Search">
            <label for="search"><i class="fa fa-search"></i></label>
          </div>
        </form>
      </div>
    </div>
</div>

<!--VSCO Navigation Bar!-->
<div class="nav-bar">
  <ul>
    <li><a href="#store">Store</a></li>
    <li><a href="#news">News</a></li>
  </ul>
</div>

Answer 1

很可能这种风格导致了不良行为

.form input:-ms-input-placeholder {
  opacity: 0;
}

您正在隐藏输入，因此当您单击搜索图标时不会显示任何内容