简单搜索字段在每个浏览器中的处理方式都不同答案

【问题标题】：Simple Search Field is Handled Differently in Every Browser简单搜索字段在每个浏览器中的处理方式都不同
【发布时间】：2018-11-08 11:01:26
【问题描述】：

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

Chrome – 理想的版本

火狐

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 参与。

非常感谢任何建议！

【问题讨论】：

标签： html css svg cross-browser

【解决方案1】：

试试这段代码，我删除了绝对定位，添加了 flexbox 并将 400px 宽度移动到父级：

* { 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; 
  display: flex;
  flex-direction: row;
  width: 400px;
}

input {
  font-size: 1rem;
  padding: 20px;
  outline: none;
  border: 1px solid black;
  display: flex;
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
}

.icon {
  border: 2px solid blue;
  right: 0;
  top: 0px;
  bottom: 0px;
  padding: 10px;
  display: inline-flex;
  align-items: center;
}

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

【讨论】：