私のコードは
<input class="menu_button" type="submit" value="Log in">
<a href="register.php" class="menu_button">Register</a>
a href はCSSで完全にスタイル設定されていますが、type = submitの入力ボタンはそうではありません...
どうすれば変更できますか
aa href に?
ここにjsfiddleがあります。
ボタンの外観がどのように異なるかをご覧ください。1 つは高く、もう 1 つは小さく、完璧です。この問題を解決する方法を教えてください。
ページはブラウザにキャッシュされている可能性があります。これを回避する方法はいくつかあります。あなたはできる：
IE を使用してデバッグしている場合は、ページにアクセスするたびにキャッシュを更新するように設定することもできます。
インターネットオプションを表示します。ダイアログの [閲覧の履歴] セクションの[設定]ボタンをクリックし、 [保存されたページの新しいバージョンを確認する:]設定を[Web ページにアクセスするたびに... ] に変更します。
コードに以下のコードを追加するだけです。
box-sizing: border-box;
-moz-box-sizing: border-box;
高さを調整するには、「最小幅」と「パディング」で遊ぶことをお勧めします。「幅」と「高さ」を指定するとボタンが制限される可能性があり、さらにテストまたはパディングがある場合、高さと幅は背景を増加させません。
更新されたコードを参照してください:-
.menu_button {
-moz-box-shadow:inset 0px -1px 0px 0px #000000;
-webkit-box-shadow:inset 0px -1px 0px 0px #000000;
box-shadow:inset 0px -1px 0px 0px #000000;
background-color:#000000;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0;
border:1px solid #fa1e0f;
display:inline-block;
color:#ffffff;
font-family:Arial;
font-size:12px;
font-weight:normal;
font-style:normal;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #33302f;
box-sizing: border-box; /*ADDED*/
-moz-box-sizing: border-box; /*ADDED*/
padding:5px;
}
お役に立てれば！
これを css に追加します。
input[type=submit]{
height: 22px;
line-height: 18px;
cursor: pointer;
}
現在行っているように高さと幅を使用する代わりに、テキストが垂直方向に中央揃えになるため、パディングを使用する必要があります。
が送信されない理由は、現在フォームを使用していないためです。フォームに必要なものの周りにフォームタグを追加して、これを使用できるようにする必要があります。
<form action='#' method='get'>
<input class="menu_button" type="submit" value="Log in" />
</form>
これが実用的なフィドルです：
試す
margin: 0;
padding: 0;
white-space: normal;
box-sizing: content-box;
タグのinputスタイルは、ユーザー エージェント スタイルシートによってタグとは異なりaます。
私が理解しているように、両方の要素を同じスタイルにする必要がありますか? ここに1つの解決策があります：
.menu_button {
-moz-box-shadow:inset 0px -1px 0px 0px #000000;
-webkit-box-shadow:inset 0px -1px 0px 0px #000000;
box-shadow:inset 0px -1px 0px 0px #000000;
background-color:#000000;
text-indent: 0;
border: 1px solid #fa1e0f;
display: inline-block;
color: #fff;
font: normal 12px/1 Arial;
width: 58px;
text-decoration: none;
text-align: center;
vertical-align: top;
text-shadow: 1px 1px 0px #33302f;
padding: 5px 0;
ouotline: 0 none;
margin: 0;
}
/*this is needed for firefox and buttons */
.menu_button::-moz-focus-inner { border: 0; padding: 0; outline: none; }