<input> 标签中的大纲和 Chrome 中的大小问题答案

【问题标题】：Outline in <input> tag and issues with size in Chrome<input> 标签中的大纲和 Chrome 中的大小问题
【发布时间】：2015-02-03 14:18:46
【问题描述】：

我实现了一个风格化的搜索框： HTML

@font-face {
	font-family:Beagle Normal;
	src:url(../data/beagle.woff);
}

#search input {
	border:1px solid #900;
	border-top-left-radius:14px;
	border-bottom-left-radius:14px;
	padding-left:14px;
	height:24px;
	display:inline;
	outline:0;
}

#search input:focus {
	outline:0;
	box-shadow: none !important;
}

#search button {
	background-color:#900;
	height:26px;
	display:inline;
	border:0;
	width:60px;
	position:relative;
	left:-8px;
	color:white;
	-webkit-appearance:none;
}

<div id="search">

  <form>
    	<input type="search" placeholder="Search in the site" />
        <button type="submit">Search</button>
  </form>
</div>

我删除了聚焦时出现在 Chrome 中的轮廓，但项目的高度仍然减小，就像那个轮廓仍然存在一样。

我怎样才能让它像在 Firefox 中一样出现在所有浏览器中？

火狐：http://i.stack.imgur.com/4vZFE.png IE11：等于FF 铬：http://i.stack.imgur.com/iZ9aK.png

【问题讨论】：

标签： html css google-chrome input outline

【解决方案1】：

您将输入的高度设置为24px，它需要设置为与您的按钮相同，26px（或两者都需要为 24 像素）。您可能还需要使用 box-sizing:border-box;，具体取决于您更广泛的 CSS。

@font-face {
  font-family: Beagle Normal;
  src: url(../data/beagle.woff);
}
#search input {
  border: 1px solid #900;
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
  padding-left: 14px;
  box-sizing:border-box; /* (you may or may not need this) */
  height: 26px; /* this should be the same... */
  display: inline;
  outline: 0;
}
#search input:focus {
  outline: 0;
  box-shadow: none !important;
}
#search button {
  background-color: #900;
  height: 26px; /* as this... */
  box-sizing:border-box; /* (you may or may not need this) */
  display: inline;
  border: 0;
  width: 60px;
  position: relative;
  left: -8px;
  color: white;
  -webkit-appearance: none;
}

<div id="search">

  <form>
    <input type="search" placeholder="Search in the site" />
    <button type="submit">Search</button>
  </form>
</div>

【讨论】：

【解决方案2】：

没有更多问题：我使用纯 chrome 规则解决了：

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  #search input {
    height: 26px;
  }
}

这很好用。 @SW4 这样做可以解决 Chrome 的问题，但它会使 FF 和 IE 行为不端。无论如何感谢您的建议。

【讨论】：