Question

我一直在尝试使用HTML，CSS和JS构建搜索引擎，但是IE11似乎并不喜欢文本框。下拉菜单项与文本字段重叠，并且永远无法正确显示（附有屏幕截图）。在Google Chrome和Edge中可以正常运行。但是从不在IE11中工作。也就是说，Java脚本也会呈现超级慢的速度

任何帮助将不胜感激。

CODEPENLINK

图片1-Internet Explorer

图片2-Google Chrome

var testVals = ["What are your primary job responsibilitiasasasasases?",
    "What experience did you have to get your job?",
    "How long have you worked here?",
    "What is your own background and experience?",
    "What is a typical work day like?",
    "How long is your work day?",
    "How much variety is there in your work?",
    ];

$(document).ready(function () {
    elementList = document.getElementById("testListDummy");
    //Search Box Function
    $(".search-text").on("input", function () {
        if ($('.search-text').val() == '') {
            $('.search-text').removeAttr('style');
            elementList.innerHTML = " ";
        } else {
            $(".search-text").css({"width": "350px", "padding": "0 6px"});
            var a="";
            a = $(".search-text").val().toUpperCase();
            a.replace(/[_\s]/gi, "").toUpperCase();
            console.log(a);

            var entry = document.createElement('li');
            var arrayVal = ""
            elementList.innerHTML = " ";
            for(i=0;i<=testVals.length;i++){
                arrayVal = testVals[i].toUpperCase();
                if(arrayVal.includes(a)){
                    console.log(testVals[i])
                    $('#testListDummy').append('<li>'+testVals[i]+'</li>');
                    console.log(document.getElementById('testListDummy'));


                }


            }



        }
    });

});

.search-box {
    position: absolute;
    top: 260px;
    left: 46%;

    transform: translate(-50%, -50%);
    background: #2f3640;
    height: 60px;
    border-radius: 40px;
    padding: 10px;
}

.search-box:hover > .search-text {
    width: 350px;
    padding: 0 6px;

}

.search-box:hover > .search-btn {
    background: white;

}

.search-btn {
    color: #e84118;
    float: right;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #2f3640;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 1s;

}

.search-text {
    font-family: VFRegular;
    border: none;
    background: none;
    outline: none;
    float: left;
    padding: 0;
    color: white;
    font-size: 16px;
    transition: 0.5s;
    line-height: 40px;
    width: 0px;
	height: 50px;


}


.search-box > ul {
    left: -100px;
    background-color: #2f3640;
    color: white;
    border-radius: 10px;
    list-style-type: none;
    font-size: 15px;


}

.search-box > ul li {
    left: -10px;
    margin: 0 0 10px 0;
	width: 90%;
    border-bottom: 1px solid white;
    z-index: 1;
}

.search-box > ul li:last-child {
    margin: 0 0 10px 0;
    border-bottom: 1px solid transparent;
}


.search-box > ul li:hover {
	font-weight: bold;
	
}

<!-- Search Box -->
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.10.1/css/mdb.min.css" rel="stylesheet">
  <!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.10.1/js/mdb.min.js"></script>
  
  
  
  
  
  
</head>
<body>
  <div class="entire-searchbox">
    <div class="search-box">
        <input class="search-text" type="text" placeholder="Type to search">

        <a class="search-btn" href="#">
            <i class="fas fa-search"></i>
        </a>

        <ul id="testListDummy">
        </ul>
    </div>
</div>
</body>

Answer 1

您的代码中有两个问题。首先，includes在IE中未定义。您需要add polyfill使其在IE 11中受支持。其次，您需要给width赋予一个.search-box值，以使其在动画时在IE中具有正确的宽度。您可以在脚本中添加以下两行：

if ($('.search-text').val() == '') {
                ...
                $('.search-box').removeAttr('style');
                ...
            } else {
                ...
                $(".search-box").css({ "width": "410px" });
                ...
            }

代码示例如下：

//polyfill for includes
if (!String.prototype.includes) {
  String.prototype.includes = function(search, start) {
    'use strict';

    if (search instanceof RegExp) {
      throw TypeError('first argument must not be a RegExp');
    }
    if (start === undefined) {
      start = 0;
    }
    return this.indexOf(search, start) !== -1;
  };
}

var testVals = ["What are your primary job responsibilitiasasasasases?",
  "What experience did you have to get your job?",
  "How long have you worked here?",
  "What is your own background and experience?",
  "What is a typical work day like?",
  "How long is your work day?",
  "How much variety is there in your work?",
];

$(document).ready(function() {
  elementList = document.getElementById("testListDummy");
  //Search Box Function
  $(".search-text").on("input", function() {
    if ($('.search-text').val() == '') {
      $('.search-text').removeAttr('style');
      $('.search-box').removeAttr('style');
      elementList.innerHTML = " ";
    } else {
      $(".search-text").css({
        "width": "350px",
        "padding": "0 6px"
      });
      $(".search-box").css({
        "width": "410px"
      });
      var a = "";
      a = $(".search-text").val().toUpperCase();
      a.replace(/[_\s]/gi, "").toUpperCase();
      console.log(a);

      var entry = document.createElement('li');
      var arrayVal = ""
      elementList.innerHTML = " ";
      for (i = 0; i <= testVals.length; i++) {
        arrayVal = testVals[i].toUpperCase();
        if (arrayVal.includes(a)) {
          console.log(testVals[i])
          $('#testListDummy').append('<li>' + testVals[i] + '</li>');
          console.log(document.getElementById('testListDummy'));
        }
      }
    }
  });
});

.search-box {
  position: absolute;
  top: 260px;
  left: 46%;
  transform: translate(-50%, -50%);
  background: #2f3640;
  height: 60px;
  border-radius: 40px;
  padding: 10px;
}

.search-box:hover>.search-text {
  width: 350px;
  padding: 0 6px;
}

.search-box:hover>.search-btn {
  background: white;
}

.search-btn {
  color: #e84118;
  float: right;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2f3640;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 1s;
}

.search-text {
  font-family: VFRegular;
  border: none;
  background: none;
  outline: none;
  float: left;
  padding: 0;
  color: white;
  font-size: 16px;
  transition: 0.5s;
  line-height: 40px;
  width: 0px;
  height: 50px;
}

.search-box>ul {
  left: -100px;
  background-color: #2f3640;
  color: white;
  border-radius: 10px;
  list-style-type: none;
  font-size: 15px;
}

.search-box>ul li {
  left: -10px;
  margin: 0 0 10px 0;
  width: 90%;
  border-bottom: 1px solid white;
  z-index: 1;
}

.search-box>ul li:last-child {
  margin: 0 0 10px 0;
  border-bottom: 1px solid transparent;
}

.search-box>ul li:hover {
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.10.1/css/mdb.min.css" rel="stylesheet">
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.10.1/js/mdb.min.js"></script>
<div class="entire-searchbox">
  <div class="search-box">
    <input class="search-text" type="text" placeholder="Type to search">
    <a class="search-btn" href="#">
      <i class="fas fa-search"></i>
    </a>
    <ul id="testListDummy"></ul>
  </div>
</div>

Internet Explorer渲染问题。（HTML CSS JS）

1 个答案:

Internet Explorer渲染问题。 （HTML CSS JS）

1 个答案:

Internet Explorer渲染问题。（HTML CSS JS）