input :: - webkit-outer-spin-buttonは余白が残っていて、Chromeにしか表示されません

Question

Ok ...これは非常に奇妙です。ここで

は私のすべての入力のためのコードは次のとおりです。

#sign_in input#submit { 
    height: 56px; 
    background-color: #88b805; 
    font-weight: bold; 
    text-decoration: none; 
    padding: 5px 40px 5px 40px; /* top, right, bottom, left */ 
    border: 0; 
    width: auto; 
    -moz-border-radius: 25px; 
    -khtml-border-radius: 25px; 
    -webkit-border-radius: 25px;  
} 

#sign_in input#submit:hover { 
    -moz-box-shadow: 5px 3px 5px rgba(0,0,0,.5); 
    -khtml-box-shadow: 5px 3px 5px rgba(0,0,0,.5); 
    -webkit-box-shadow: 5px 3px 5px rgba(0,0,0,.5); 
    cursor: pointer;  
} 

input, textarea { 
    font-size:20px; 
    display: block; 
    width: 365px; 
    height: 40px; 
    background: #273243; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    color: #ffffff; 
    /* margin: 0 0 0 100px;  top, right, bottom, left */ 
    padding: 5px 5px 5px 15px; /* top, right, bottom, left */ 
    border: 0px; 
} 

input:focus, textarea:focus { 
    background: #313131; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
} 

私の問題は、送信ボタンを使用することです：

<div id="sign_in" align="center"> 

<form> 
     <input id="name" type="text" value="Email address" required class="clearField curved" /> <br /> 
     <input id="password" type="text" value="Password" required class="clearField curved" /><br /> 
     <input id="submit" type="submit" value="Log in" class="curved" align="center"> 
    </form> 

</div> 

私は=中央に整列するのdivセットを持っているにもかかわらず、すべてがされますログインボタンを除いてChromeを中心にしています

Btw、Firefoxでチェックし、MacでSafariを確認しても問題ありません。送信ボタンが左の余白と同じように見えるのは、WindowsとMacの両方のChromeだけです。私はChromeで開発ツールのプロパティをチェックするとき

はまた、私は奇妙な何かに気づく：

input::-webkit-outer-spin-button { 
-webkit-appearance: outer-spin-button; 
-webkit-user-select: none; 
display: inline-block; 
margin-left: 2px; 
} 

は、私は余裕左が2ピクセルに設定されている理由はわかりません。私はそれをオーバーライドするためにその特定の擬似クラスを対象とすることができたと思う、それをまだ試みていないが、それを行う必要なく、それを行う別の方法があるのだろうか？それはちょっとハッキリしているようです。

なぜこれを行うのですか？どのように修正できますか？私はボタンを中央に揃えたい。

編集：特定の擬似セレクタをターゲットにして、余白を設定しようとしましたが、何も起こりませんでした。余白を150ピクセルに設定しても、ボタンのレイアウトは変更されませんでした。何が起こっているのか分かりません。

Answer 1

div要素からalign = "center"を削除します。

 #sign_in { 
     width:960px; 
     margin:0 auto; 
    } 
    #sign_in input#submit { 
     height: 56px; 
     background-color: #88b805; 
     font-weight: bold; 
     text-decoration: none; 
     padding: 5px 40px 5px 40px; /* top, right, bottom, left */ 
     border: 0; 
     -moz-border-radius: 25px; 
     -khtml-border-radius: 25px; 
     -webkit-border-radius: 25px;  
    } 

    #sign_in input#submit:hover { 
     -moz-box-shadow: 5px 3px 5px rgba(0,0,0,.5); 
     -khtml-box-shadow: 5px 3px 5px rgba(0,0,0,.5); 
     -webkit-box-shadow: 5px 3px 5px rgba(0,0,0,.5); 
     cursor: pointer;  
    } 

    input, textarea { 
     font-size:20px; 
     display: block; 
     width: 365px; 
     height: 40px; 
     background: #273243; 
     -moz-border-radius: 10px; 
     -webkit-border-radius: 10px; 
     color: #ffffff; 
     /* margin: 0 0 0 100px;  top, right, bottom, left */ 
     padding: 5px 5px 5px 15px; /* top, right, bottom, left */ 
     border: 0px; 
    margin:0 auto; 
    }