1

基本フォームの送信ボタンに問題があります。クリックすると、Firefox 内でボタンが移動します。ボタンが数ピクセル上にわずかに移動します。このページはhttp://www.jmtalbott.com/contact.htmlで見ることができます。誰かがこれを修正する方法を知っていますか?

HTML

<form id="form" method="post" action="http://example.com/processform/">
<p>Name</p>
    <input type="text" name="name"/>
<p>Email Address</p>
    <input type="text" name="email"/>
<p>Message</p>
    <textarea name="comments" rows="15" cols="38"></textarea></p>
<p></p>
<input class="button" value="Send" type="submit"/>
</form>

CSS

#form {
font-size: .8em;
margin: 0 auto;
padding: 10px 0px 40px 25px;
width: 385px;
height: 400px;
position: absolute;
top: 190px;
left: 290px;
box-shadow: -4px -6px 8px 2px rgba(225,229,232,.5),
            8px 6px 12px rgba(225,229,232,.5);
}
#form p {
padding: 15px 0 5px 0;
}
.button {
-moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
-webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
box-shadow:inset 0px 1px 0px 0px #bbdaf7;
background:-webkit-gradient( linear, left top, left bottom, 
    color-stop(0.05,    #79bbff) color-stop(1, #378de5) );
background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff',    endColorstr='#378de5');
background-color:#79bbff;
-moz-border-radius:6px;
-webkit-border-radius:6px; 
border:1px solid #84bbf3;
display:inline-block;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #528ecc;
position: absolute;
top: 470px;
left: 2px;
}
.button:hover {
background:-webkit-gradient( linear, left top, left bottom, 
    color-stop(0.05,  #378de5), color-stop(1, #79bbff) );
background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );
filter:progid:DXImageTransform.Microsoft.gradient
   (startColorstr='#378de5', endColorstr='#79bbff');
background-color:#378de5;
}
.button:active {
position:relative;
top:1px;
}
4

1 に答える 1

2

問題は、.buttonが非ホバー状態に完全に配置されていることです。

ではbutton:hover、位置指定が相対に変更され、位置が完全に変更されます。

簡単な修正は、次のものを削除することです。

.button:active {
   position:relative;
   top:1px;
 }

ps

問題を解決するよりも、これを書き上げるのに時間がかかりました...

于 2013-06-14T02:56:50.063 に答える