Вертикальное выравнивание кнопки отправки с использованием CSS HTML - PullRequest
Новая
       19

Вертикальное выравнивание кнопки отправки с использованием CSS HTML

5 голосов
/ 21 мая 2011

У меня проблемы с отображением кнопки отправки в соответствии с моими данными в Internet Explorer. Выравнивание хорошо в Safari и Firefox, но IE опускает кнопку примерно на 5 пикселей. Есть идеи, почему это происходит или как я могу это исправить?

URL-адрес http://www.menslifestyles.com нажмите «подписаться» вверху страницы, на которой появится форма. Два входа выстраиваются в линию, но кнопка отправки не выровнена!

------- HTML ------- 

<div id="subscribe">
<form id="subscribeform" method="post" action="/maillists/subscribe" accept-charset="utf-8">
<div style="display:none;"><input type="hidden" name="_method" value="POST"></div>

<label for="MaillistName">Name</label><input name="data[Maillist][name]" type="text" maxlength="255" id="MaillistName">&nbsp;    &nbsp;
<label for="MaillistEmail">Email</label><input name="data[Maillist][email]" type="text" maxlength="500" id="MaillistEmail">
<input type="submit" value="Submit"><a href="#" id="closelink">X</a>
</form></div>

----- ------- * CSS 1010 * 

#subscribe{
    width:620px;
    position:absolute;
    top:25px;
    left:50%;
    margin-left:-120px;
    overflow: auto;
    z-index: 1000;
    background: #ffffff;
    color:#6e6e6e;
    font-size: 10px;
    text-transform: uppercase;
    font-family: Helvetica, Verdana;
}
#subscribe input{
    border: 1px solid #e5e5e5;
    display: inline;
    height: 12px;
    color:#cccccc;
    width: 215px;
}  
#subscribe input[type="button"], #subscribe input[type="submit"]{
    clear:both;
    padding:3px, 0px;
    -webkit-appearance: none;
    font-family: Helvetica, Verdana;
    background-color:#cccccc;
    text-align:center;
    color: #3c3c3c;
    font-size:10px;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    display: inline;
    height:15px;
    width:60px;
    position:relative;
    margin-left:5px;
}
#subscribe form{
    margin:0px;
    padding:0px;
}
#subscribe label{
    display: inline;
    font-size: 10px;
}
#subscribe a{
    text-decoration: none;
    color: #cccccc;
}
#subscribe #closelink{
    padding:0 5px;
}

Ответы [ 4 ]

8 голосов
/ 21 мая 2011

В вашем css для #subscribe input[type="button"], #subscribe input[type="submit"] попробуйте добавить vertical-align: top;

1 голос
/ 25 августа 2011

Кнопка отправки, похоже, имеет разные значения полей и отступов по умолчанию в разных браузерах.

Я предполагаю, что это должно быть в сбросе таблицы стилей , так как это не единственное раздражающее расхождение между значениями по умолчанию в браузере. Когда сеть станет стандартизированной, это еще одна тема.

Вот как мы это делаем: 

#searchForm {
    position: relative;   // you must keep this
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 30px;
}
input#searchBtn{
    padding: 0;    // you must keep this
    margin: 0;     // you must keep this
    position: absolute;    // you must keep this
    left: 203px;  // you can change this
    top: 2px;
    height: 24px;
    width: 42px;   // you can change this
    font-size: 14px;
    background: url(http://yourDomain/img/yourPrettySearchIcon.png) buttonface no-repeat 9px 1px;
}


<form id="searchForm" name="mySearchForm" action="myPage.html" method="post">
    <input name="searchBtn" value="" id="searchBtn" type="submit"/>
</form>

Я заметил очень небольшие расхождения между IE8, Firefox и GChrome, но они могут быть и в других браузерах.

Форма здесь имеет свою позицию, установленную на «относительный», поэтому, когда я устанавливаю абсолютную позицию кнопки, сама кнопка позиционируется относительно searchForm.

1 голос
/ 21 мая 2011

В этом правиле CSS

#subscribe input[type="button"], #subscribe input[type="submit"]

Изменить

position:relative

на

position:absolute

Должен сделать свое дело.Протестировано в IE 8 и работает.

1 голос
/ 21 мая 2011

Вы должны установить отступы и поля явно, некоторые браузеры имеют разные значения по умолчанию, которые могут испортить ситуацию.Таким образом, поле слева: 5px;становится полем: 0 0 0 3px;

Формы, как правило, также просто несовместимы, вы можете попробовать и абсолютно позиционировать кнопку отправки, в этом случае укажите #subscribe position: относительное, и положение кнопки submit: абсолютное;право: 0px;top: 0px;

В будущем вы можете обойти значения браузера по умолчанию и получить более согласованный вид, установив значения по умолчанию в своей таблице стилей, см. здесь для таблицы сброса стилей, которую вы можетевключают.(Если вы включите это сейчас, это может выкинуть несколько вещей)

...