У меня есть форма входа в систему, в которой текстовые поля и кнопка отправки растягиваются до 100% размера контейнера. Это для гибкой мобильной компоновки, но мой пример jsbin ниже имеет фиксированный размер контейнера для демонстрационных целей.
В IE7, IE8, FF 4, Safari - все отображают кнопку отправки немного короче, чем текстовые поля. Инструмент компоновки Firebug показывает текстовые поля шириной 500 пикселей, а кнопка отправки - 498 пикселей. В моем реальном примере кнопка отправки 6px skinnier. Как я могу исправить это, чтобы он занимал всю ширину?
Обновление
Я сделал еще один тест, установив фиксированную ширину на входах. Кажется, что кнопка отправки не соответствует модели окна. Я использовал ширину 100 пикселей, и он показал 98px + 2px для границ, в то время как текстовые поля отображали ширину 100px + 2px для границ.
Итак, я думаю, вопрос в том, как я могу справиться с этим в жидком макете? -1px правое и левое дополнение на кнопках, похоже, не работает, и дизайн требует 1px границы на кнопке! Придется ли мне прибегать к js?
По какой-то причине mozilla устанавливает входы текста типа в -moz-box-sizing:content-box;, но кнопка отправки имеет значение -moz-box-sizing:border-box;
Настройка следующего даст вам предполагаемый рендеринг в FF.
.login-tb {
border:1px solid red;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
margin: 0;
padding: 0;
width:100%;
}
Update: Добавлена поддержка Safari и IE8 +.
Я считаю, что браузер вычисляет размеры ввода [type = submit]. Я попытался применить некоторые сбрасывания, но они тоже не работали. Я работаю на Macbook Air с Chrome и на вашем примере JSBin, просмотр в реальном времени выглядел отлично, но "Render" подтвердил вашу проблему.
Я попробовал jsfiddle.net, и он показал ту же проблему. Здесь обходной путь, если это будет летать для вашего приложения. Просто удалите границу и фон из кнопки отправки и создайте вместо этого оболочку div, затем добавьте прослушиватель кликов в div, чтобы отправить форму:
CSS
form {
width: 500px;
padding:0;
margin:0;
}
form div, form div input {
height:20px;
margin-bottom:4px;
}
input[type=text] {
width: 100%;
border: 1px solid red;
padding: 0;
margin: 0;
}
#submit input{
background:transparent;
margin:auto;
border:none;
}
#submit{
text-align:center;
background-color:#CCC;
width: 100%;
border: 1px solid red;
padding: 0;
margin: 0;
cursor:pointer;
}
Jquery:
$('#submit').click(function(){
$('#login').submit();
});
$('#login').submit(function(){
alert('form submitted');
return false;
});
АЛЬТЕРНАТИВНАЯ ЖИЗНЬ JS:
function submit_form()
{
alert('form submitted');
return false;
// when you are ready, do this: document.forms['login'].submit();
}
document.getElementById('submit').addEventListener('click',submit_form,false);
Это довольно странно. Я думаю, что граница 1px добавляется к внешней стороне ваших текстовых входов, поэтому она имеет ширину 500 пикселей.
В то время как на кнопке "Отправить" кнопка подсчитывается по бокам, но отображается внутри, так что вы получаете 500px - 1px - 1px = 498px wide...
Возможное решение, которое вы можете сделать, это просто создать следующий CSS:
.login-tb {
border: 1px solid red;
margin: 0;
padding: 0;
width: 500px;
}
#login-tb {
border: 1px solid red;
margin: 0;
padding: 0;
width: 502px;
}
Это исправляет вашу проблему, и она по-прежнему показывает вашу кнопку отправки размером 500 пикселей в Firebug. И так как ваша форма установлена на ширину 500 пикселей, и это не меняется, использование ширины в процентах мало.
Не уверен, что это сработает для вашей среды. Когда я играл с jsbin, настройка width работала...
.login-tb { width: 99.75%; border: 1px solid red; padding: 0; margin: 0; }
Проверено только на Chrome.