Firefox CSS位置不可预知行为

Question

我有相同的HTML/CSS代码在Chrome或Safari与Firefox中工作不同。

但Firefox有时也有效。例如，如果调整codepen窗口的大小，检查或更改Firefox中输入的标签，它的行为是正确的，然后再次不正确。

Codepen Example

body { 
 
    overflow: hidden; 
 
    padding: 20px; 
 
} 
 

 
div, input { 
 
    box-sizing: border-box; 
 
} 
 

 
form { 
 
    display: flex; 
 
    flex-flow: column nowrap; 
 
    justify-content: space-around; 
 
    width: 100%; 
 
    padding: 40px 0px; 
 
    z-index: 10; 
 
    flex: 1 1 0%; 
 
    font-size: 16px; 
 
} 
 

 
.my-field { 
 
    display: flex; 
 
    flex-flow: column nowrap; 
 
    width: 100%; 
 
    font-size: 18px; 
 
    align-items: flex-start; 
 
    margin: 15px 0px; 
 
} 
 

 
.label-wrap { 
 
    display: flex; 
 
    align-items: center; 
 
    position: relative; 
 
    font-size: 0.85em; 
 
    margin-bottom: 5px; 
 
    width: 100%; 
 
} 
 

 
.label { 
 
    flex: 1; 
 
} 
 

 
.input-wrap { 
 
    display: flex; 
 
    position: relative; 
 
    width: 100%; 
 
    align-items: center; 
 
} 
 

 
.icon-wrap { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    width: 40px; 
 
    height: 40px; 
 
    z-index: 10; 
 
    padding: 6px; 
 
    position: absolute; 
 
    left: 0px; 
 
    margin-left: 2px; 
 
} 
 

 
.my-input { 
 
    display: flex; 
 
    position: relative; 
 
    width: 100%; 
 
    border-radius: 5px; 
 
} 
 

 
input { 
 
    width: 100%; 
 
    height: 48px; 
 
    line-height: 38px; 
 
    padding-left: 40px; 
 
    padding-right: 44px; 
 
    font-size: 1em; 
 
    text-align: inherit; 
 
    font-family: inherit; 
 
    border: 1px solid rgb(204, 204, 204); 
 
    resize: none; 
 
}

<form> 
 
    <div class="my-field"> 
 
    <div class="label-wrap"> 
 
     <div class="label"> 
 
     <span>Change this labe</span> 
 
     </div> 
 
    </div> 
 
    <div class="input-wrap"> 
 
     <div class="icon-wrap"> 
 
     <svg viewBox="0 0 24 24" width="100%" height="100%"> 
 
      <g> 
 
      <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path> 
 
      </g> 
 
     </svg> 
 
     </div> 
 
     <div class="my-input"> 
 
     <input name="name" placeholder="Or resize codepen layout" autocomplete="off" spellcheck="false" type="text"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</form>

内部堆栈溢出的Chrome VS Firefox的比较

在Chrome中：

在Firefox：

在Safari中：

如何以安全的方式管理这个任何提示是值得欢迎的，谢谢。

Answer 1

为了使它在每一个浏览器工作，你可以在icon-wrap DIV删除

display: flex; 
align-items: center; 
justify-content: center; 

，并添加

top: 50%; 
transform: translateY(-50%); 

所以，你将垂直对齐的图标只与绝对位置。

这个解决方案应该在Chrome浏览器，Safari浏览器火狐& :)

body { 
 
    overflow: hidden; 
 
    padding: 20px; 
 
} 
 

 
div, input { 
 
    box-sizing: border-box; 
 
} 
 

 
form { 
 
    display: flex; 
 
    flex-flow: column nowrap; 
 
    justify-content: space-around; 
 
    width: 100%; 
 
    padding: 40px 0px; 
 
    z-index: 10; 
 
    flex: 1 1 0%; 
 
    font-size: 16px; 
 
} 
 

 
.my-field { 
 
    display: flex; 
 
    flex-flow: column nowrap; 
 
    width: 100%; 
 
    font-size: 18px; 
 
    align-items: flex-start; 
 
    margin: 15px 0px; 
 
} 
 

 
.label-wrap { 
 
    display: flex; 
 
    align-items: center; 
 
    position: relative; 
 
    font-size: 0.85em; 
 
    margin-bottom: 5px; 
 
    width: 100%; 
 
} 
 

 
.label { 
 
    flex: 1; 
 
} 
 

 
.input-wrap { 
 
    display: flex; 
 
    position: relative; 
 
    width: 100%; 
 
    align-items: center; 
 
} 
 

 
.icon-wrap { 
 
    /* Remove this */ 
 
    /* display: flex; */ 
 
    /* align-items: center; */ 
 
    /* justify-content: center; */ 
 
    width: 40px; 
 
    height: 40px; 
 
    z-index: 10; 
 
    padding: 6px; 
 
    position: absolute; 
 
    left: 0px; 
 
    margin-left: 2px; 
 
    /* Add this */ 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
} 
 

 
.my-input { 
 
    display: flex; 
 
    position: relative; 
 
    width: 100%; 
 
    border-radius: 5px; 
 
} 
 

 
input { 
 
    width: 100%; 
 
    height: 48px; 
 
    line-height: 38px; 
 
    padding-left: 40px; 
 
    padding-right: 44px; 
 
    font-size: 1em; 
 
    text-align: inherit; 
 
    font-family: inherit; 
 
    border: 1px solid rgb(204, 204, 204); 
 
    resize: none; 
 
}

<form> 
 
    <div class="my-field"> 
 
    <div class="label-wrap"> 
 
     <div class="label"> 
 
     <span>Change this labe</span> 
 
     </div> 
 
    </div> 
 
    <div class="input-wrap"> 
 
     <div class="icon-wrap"> 
 
     <svg viewBox="0 0 24 24" width="100%" height="100%"> 
 
      <g> 
 
      <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path> 
 
      </g> 
 
     </svg> 
 
     </div> 
 
     <div class="my-input"> 
 
     <input name="name" placeholder="Or resize codepen layout" autocomplete="off" spellcheck="false" type="text"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</form>