Safari 包含高度输入的边框？答案

【问题标题】：Safari includes border for height input?Safari 包含高度输入的边框？
【发布时间】：2021-01-05 11:26:37
【问题描述】：

为什么我在 Safari 上查看网站时输入的高度有这种差异？我可以看到 Safari 在高度中也包含边界线，我不确定这是否是问题或如何解决。

<div className="input_city">
    <input
       id="input_basic"
       placeholder="Search city"
       onChange={handleInput}
       value={searcher}
     />
     <button className="button_search" onClick={handleSubmit}>
      Search
     </button>
</div>

.input_city {
  display: table;
  align-items: center;
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 4;
  grid-row-end: 6;
  margin-bottom: -10px;
  text-align: end;
}

#input_basic {
  padding: 8.5px 5px;
  font-size: 1rem;
  border-radius: 3px 0px 0px 3px;
  border: 1px solid #ccc;
  border-right: none;
  vertical-align: bottom;
}

#input_basic:focus {
  outline: none;
}


.button_search {
  border-radius: 0px 3px 3px 0px;
  padding: 10px 5px;
  border: 1px solid #ccc;
  width: 5rem;
  background-color: #ec6e4c;
  color: #fff;
  border-left: none;
  cursor: pointer;
}

.button_search:focus {
  outline: none;
}

.button_search:hover {
  background: #ec6f4cc7;
}

【问题讨论】：

标签： javascript css reactjs safari

【解决方案1】：

尝试对齐输入和搜索按钮元素存在一些问题。

Safari 在边框下方的顶部放置了一个小阴影，使其与搜索按钮边框不对齐。此外，对于任何浏览器，这两个元素的高度不一定完全相同。

为了解决这两个问题，我们首先让浏览器尽可能多地删除它自己的格式，然后我们使用 rems 作为基本单位，在两个元素上设置一个特定的高度，这样我们就不必依赖于浏览器如何处理字体来设置元素的高度。

这是代码。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
input[type=text] {   
    /* remove browser formatting */
    /* note that Safari uses attribute type so we've added it in the HTML */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    outline: none;
    }
    
.input_city {
  display: table;
  align-items: center;
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 4;
  grid-row-end: 6;
  margin-bottom: -10px;
  text-align: end;
}

#input_basic {
  font-size: 1rem;
  border-radius: 3px 0px 0px 3px;
  border: 1px solid #ccc;
  border-right: none;
  vertical-align: bottom;
  
  /*added*/
  line-height: 1.2rem;
  padding: 0.25rem;
  height: 2rem;
}

#input_basic:focus {
  outline: none;
}

.button_search {
  border-radius: 0px 3px 3px 0px;
  border: 1px solid #ccc;
  width: 5rem;
  background-color: #ec6e4c;
  color: #fff;
  border-left: none;
  cursor: pointer;
  
    /*added*/
  line-height: 1.2rem;
  padding: 0.25rem;
  height: 2rem;
}

.button_search:focus {
  outline: none;
}

.button_search:hover {
  background: #ec6f4cc7;
}

<div class="input_city">
    <input type="text" id="input_basic" placeholder="Search city" onChange="" value=''/>
     <button class="button_search" onClick="">
      Search
     </button>
</div>

Remove iOS input shadow 提供了有关删除浏览器内置格式的有用信息。

【讨论】：