0

所以，我为我的按钮弄乱了 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 中所见。任何想法是什么原因造成的？

4

3 回答 3

2

我没有看到问题....查看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>，并非所有浏览器都支持标签。

更好的方法...

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>

于 2013-01-13T18:34:58.880 回答
0

这可能是height造成这种情况的属性，因为紫色区域似乎29 px很高。我不确定文本下方的额外边框是什么，但可能是边框被应用在文本周围而不是整个按钮。尝试添加border:none，看看是否有帮助。

于 2013-01-13T18:25:13.053 回答
0

在jsfiddle上看到这个演示

你的问题是id='upload'或id="signin"在

<div id="upload" class="top-button"><button>Upload</button></div>

uploadCSS for和signinids之间存在一些冲突，可能是一些高值问题

于 2013-01-13T18:26:29.390 回答