100% -ная ширина при вводе типа ввода и текст типа ввода

У меня есть форма входа в систему, в которой текстовые поля и кнопка отправки растягиваются до 100% размера контейнера. Это для гибкой мобильной компоновки, но мой пример jsbin ниже имеет фиксированный размер контейнера для демонстрационных целей.

http://jsbin.com/ozutoq/9

В IE7, IE8, FF 4, Safari - все отображают кнопку отправки немного короче, чем текстовые поля. Инструмент компоновки Firebug показывает текстовые поля шириной 500 пикселей, а кнопка отправки - 498 пикселей. В моем реальном примере кнопка отправки 6px skinnier. Как я могу исправить это, чтобы он занимал всю ширину?

Обновление

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

Итак, я думаю, вопрос в том, как я могу справиться с этим в жидком макете? -1px правое и левое дополнение на кнопках, похоже, не работает, и дизайн требует 1px границы на кнопке! Придется ли мне прибегать к js?

Ответ 1

По какой-то причине 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 +.

Ответ 2

Я считаю, что браузер вычисляет размеры ввода [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;
});

http://jsfiddle.net/pZcx4/

АЛЬТЕРНАТИВНАЯ ЖИЗНЬ 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);

http://jsfiddle.net/pZcx4/3/

Ответ 3

Это довольно странно. Я думаю, что граница 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 пикселей, и это не меняется, использование ширины в процентах мало.

Ответ 4

Не уверен, что это сработает для вашей среды. Когда я играл с jsbin, настройка width работала...

.login-tb { width: 99.75%; border: 1px solid red; padding: 0; margin: 0; }

Проверено только на Chrome.