javascript - 显示内联块在 Safari 上不起作用

Question

这是因为 safari 不支持的内联块问题吗？

input[type=search] {
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
  font-family: inherit;
  font-size: 100%;
  border: none;
}

input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
  display: none;
}

#package-search input[type=search] {
  color: transparent;
  display: inline-block;
  width: 80px;
  height: 56px;
  background: #fff url(assets/img/img/icon/search-b.png) no-repeat 30px 18px;
  background-size: 23px auto;
  border-radius: 28px;
  cursor: pointer;
  margin-top: 10px;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
  padding-left: 0;
}

#package-search input[type=search]:hover {
  background-color: pink;
}

#package-search input[type=search]:focus {
  width: 380px;
  padding-left: 70px;
  padding-right: 20px;
  color: #343434;
  background-color: pink;
  cursor: auto;
}

#package-search input::-moz-placeholder {
  color: transparent;
}

#package-search input::-webkit-input-placeholder {
  color: transparent;
}

当我们悬停或单击时，此按钮搜索已转换为获得更多宽度，并且它将阻止该按钮搜索图标旁边的另一个 div

但是在 safari 上它不会阻止另一个 div，当我们悬停或单击时按钮框的结果，它会在另一个 div 后面

这是什么原因？我错过了什么吗？

看这个问题 看这里然后点击

标签： javascriptjqueryhtmlcss