html - 应用于按钮的 CSS 在按钮下方留下紫色框

Question

因此，我为我的按钮弄乱了 CSS，并尝试在按钮元素上测试以下 CSS 代码:

button {
    width:85px;
    height:29px;
    background-color:#800080;
    color:#FFFFFF;
    font-size:14px;
    font-weight:bold;
}

最后的 2 个按钮是由这个 HTML 创建的:

<div id="header">
    <div id="logo"><img src="logo.jpg" /></div>
    <div id="search">
        <form id="search-form">
            <input type="text" style="width:80%;height:28px;background-color:#F5F5F5;font-size:16px;position:relative;top:-3px;"/>
            <button type="button" style="position:relative;top:6px;"><img src="mgt.jpg" /></button>
        </form>
    </div>
    <div id="upload" class="top-button"><button>Upload</button></div>
    <div id="signin" class="top-button"><button>Sign in</button></div>
</div>

最后两个按钮“上传”和“登录”是问题所在。

结果:

在 Firefox 中查看。知道是什么原因造成的吗？

Answer 1

我没有看到问题....查看http://jsfiddle.net/vb7S3/

但我仍然建议不要使用 <button>标签，而是为#upload 和#signin 定义样式类。

HTML

<button id="upload" class="top-button">Upload</button>
<button id="signin" class="top-button">Sign in</button>

CSS

#upload, #signin {
    width:85px;
    height:29px;
    background-color:#800080;
    color:#FFFFFF;
    font-size:14px;
    font-weight:bold;
}

还有 <button>并非所有浏览器都支持 is 标签。

更好的方法...

HTML

<input id="button" class="upload-button" type="submit" value="Upload" />
<input id="button" class="sign-in-button" type="submit" value="Sign In" />

CSS

#button {
    width:85px;
    height:29px;
    background-color:#800080;
    color:#FFFFFF;
    font-size:14px;
    font-weight:bold;
}

必须包含 <input> <form> ... </form> 内的标签 block 。