0
これはうまく見えますが、htmtl 5モードでは検索ボタンが長くなることがあります。 私はクロム56を使用して10勝です。html5モードでボタンが長くなる
私は本当に理由を理解できません。
原点コード：
body {
font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-size:14px;}
h1 {
margin-top:0px;
margin-bottom:8px;
}
/* 链接 */
a {
text-decoration:none;
color:#1c00ff;
}
a:hover {
color:#5f00e4;
}
fieldset.search {
padding: 0px;
border: none;
width: 232px;
background:#e0e0e0;
}
fieldset.search:hover {
background: #a8a8a8;
}
.search input, .search button {
border: none;
float: left;
}
.search input.box {
height: 28px;
width: 200px;
margin-right: 0px;
padding-right: 0px;
background: #e0e0e0;
margin: 1px;
}
.search input.box:focus {
background: #e8e8e8 ;
outline: none;
}
.search button.btn {
border: none;
width: 28px;
height: 28px;
margin: 0px;
padding: 0px;
background: url(http://sandbox.runjs.cn/uploads/rs/339/livk7pl5/search_blue.png) no-repeat top right;
}
.search button.btn:hover {
background: url(http://sandbox.runjs.cn/uploads/rs/339/livk7pl5/search_black.png) no-repeat bottom right;
}
/* 文章样式 */
.article {
}<html>
<head>
<title>realize search bar</title>
<meta charset="UTF-8">
</head>
<body>
<div>
<h2>search bar</h2>
<form method="get" id="searchform" action="http://blog.iliyang.cn/">
<fieldset class="search">
<input type="text" class="box" name="s" id="s" class="inputText" placeholder="Valentine’s Day" x-webkit-speech>
<button class="btn" title="SEARCH"> </button>
</fieldset>
</form>
</div>
<article class="article">
</article>
</body>
</html>PIC 
私のコードは、ちょうどHTML5への最初の行を変更します。
body {
font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-size:14px;}
h1 {
margin-top:0px;
margin-bottom:8px;
}
/* 链接 */
a {
text-decoration:none;
color:#1c00ff;
}
a:hover {
color:#5f00e4;
}
fieldset.search {
padding: 0px;
border: none;
width: 232px;
background:#e0e0e0;
}
fieldset.search:hover {
background: #a8a8a8;
}
.search input, .search button {
border: none;
float: left;
}
.search input.box {
height: 28px;
width: 200px;
margin-right: 0px;
padding-right: 0px;
background: #e0e0e0;
margin: 1px;
}
.search input.box:focus {
background: #e8e8e8 ;
outline: none;
}
.search button.btn {
border: none;
width: 28px;
height: 28px;
margin: 0px;
padding: 0px;
background: url(http://sandbox.runjs.cn/uploads/rs/339/livk7pl5/search_blue.png) no-repeat top right;
}
.search button.btn:hover {
background: url(http://sandbox.runjs.cn/uploads/rs/339/livk7pl5/search_black.png) no-repeat bottom right;
}
/* 文章样式 */
.article {
}<!DOCTYPE html>
<head>
<title>realize search bar</title>
<meta charset="UTF-8">
</head>
<body>
<div>
<h2>search bar</h2>
<form method="get" id="searchform" action="http://blog.iliyang.cn/">
<fieldset class="search">
<input type="text" class="box" name="s" id="s" class="inputText" placeholder="Valentine’s Day" x-webkit-speech>
<button class="btn" title="SEARCH"> </button>
</fieldset>
</form>
</div>
<article class="article">
</article>
</body>
</html>PIC 
任意のヘルプしてください？あなたは.search input.box {width: 200px;}
に「PX」をommitedしている。しかし、それはあなたの問題を解決するかどうか、私は知りません
私と同じように見えますが、私もChromeを持っています。56 – Esko
それは私と全く違って見えません。あなたはもっと具体的になりますか？ – Chris