css - 表单中的按钮在html5模式下变长

这看起来不错，但是在htmtl 5模式下，搜索按钮可能会变长。
我使用chrome 56赢得了10。

我真的不明白原因。

原始代码：

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>

图片

我的代码，只需将第一行更改为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>

图片

请问有什么帮助吗？

最佳答案

您在.search input.box {width: 200px;}中省略了“ px”

但是我不知道它是否能解决您的问题，因为这两个领域在我看来都是一样的。

关于css - 表单中的按钮在html5模式下变长，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42244314/