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>

最後の 2 つのボタン「アップロード」と「サインイン」が問題です。

そして結果：

下に奇妙な紫色のボックスがあるボタン

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でこのデモを参照してください

あなたが発行する isid='upload'またはid="signin"in

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

uploadとsigninidの CSS の間に衝突があり、高値の問題が発生している可能性があります

于 2013-01-13T18:26:29.390 に答える