input :: - webkit-external-spin-button устанавливает поле margin-left и отображается только в Chrome

Question

Хорошо ... это очень странно.

Вот код для всех моих входов:

#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 для выравнивания = center, в Chrome все по центру, кроме кнопки входа в систему.

Кстати, когда я проверяю это в Firefox и Safari на Mac, все выглядит нормально.Это просто Chrome как в Windows, так и в Mac, что кнопка отправки выглядит так, что она находится на одном уровне с левым полем.

Кроме того, когда я проверяю свойства инструментов разработчика в Chrome, я замечаю нечто странное:

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

Я не уверен, почему поле слева установлено в 2px.Я думаю, я мог бы нацелиться на этот конкретный псевдокласс, чтобы переопределить его, еще не пробовал, но задавался вопросом, есть ли другой способ сделать это без необходимости делать это?Это выглядит немного «хакерски».

Почему он это делает и как я могу это исправить?Я хочу, чтобы кнопка была выровнена по центру.

Редактировать: я нацелился на этот конкретный псевдоселектор и попытался установить поле, но ничего не произошло.Это не изменило расположение кнопки, даже установив поле left-left в 150px.Так что не уверен, что происходит.

Answer 1

Удалите align = "center" из вашего элемента div.

        #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;
    }