每个浏览器对简单搜索字段的处理方式都不相同

Question

我正在实现一个搜索字段，其中包括一个输入字段和一个svg图标。这是Chrome，Firefox和IE11中当前的浏览器行为

Chrome –理想的版本

Firefox

IE11（wtf）

Here's a working demo of the code in question, hosted on codepen.

HTML

<div class="input-wrap">
  <input placeholder="Search…" />
  <div class="icon">
    <svg viewBox="0 0 100 100">
      <g transform="scale(4,4)">
        <path d="M2.2,9.1c0-3.8,3.1-6.9,6.9-6.9c3.8,0,6.9,3.1,6.9,6.9c0,3.8-3.1,6.9-6.9,6.9C5.3,16,2.2,12.9,2.2,9.1zM24,22.4l-7.7-7.7c1.3-1.6,1.9-3.6,1.9-5.6c0-5-4.1-9.1-9.1-9.1C4.1,0,0,4.1,0,9.1s4.1,9.1,9.1,9.1l0,0c2,0,4-0.7,5.6-1.9l7.7,7.7L24,22.4z"></path>
      </g>
    </svg>
  </div>
</div>

CSS

* { box-sizing: border-box; }
html { font-size: 15px; }

body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.input-wrap { position: relative; }

input {
  font-size: 1rem;
  padding: 20px;
  width: 400px;
  outline: none;
  border: 1px solid black;
}

.icon {
  position: absolute;
  border: 2px solid blue;
  right: 0;
  top: 0px;
  bottom: 0px;
  padding: 10px;
}

.icon svg {
  height: 100%;
  border: 2px solid yellow;
}

蓝色边框代表svg的父级，黄色边框代表svg。 Chrome根据svg内容调整svg父级的大小。 Firefox使svg的父级跨整个搜索字段。我不知道IE正在做什么。我需要统一他们的行为以像Chrome一样工作，同时保持搜索字段的一个关键特征：不使用固定长度！一切都基于rem，例如根字体大小增加，整个搜索字段应相应缩放。我要避免涉及JS。

任何建议都将不胜感激！

Answer 1

尝试以下代码，我删除了绝对定位，添加了flexbox并将其400px宽度移至父对象：

System.ValueType