100% szerokość na typ danych wejściowych prześlij tekst w porównaniu do typu wejściowego

Question

Mam formularz logowania, który jest tak zaprojektowany, aby pola tekstowe i przycisk przesyłania rozciągały się do 100% wielkości kontenera. Jest to płynny układ mobilny, ale mój przykład jsbina poniżej ma stały rozmiar kontenera do celów demonstracyjnych.

http://jsbin.com/ozutoq/9

w IE7, IE8, FF, Safari 4 - to wszystko czyni przycisk nieco krótsza niż tekstowych kliknij. Narzędzie układu Firebuga pokazuje pola tekstowe o szerokości 500 pikseli, ale przycisk przesyłania ma szerokość 498 pikseli. W moim prawdziwym przykładzie przycisk przesyłający ma 6px skinnier. Jak mogę to naprawić, aby zajmował całą szerokość?

Aktualizacja

zrobiłem kolejny test ustawiając stałą szerokość na wejściach. Wygląda na to, że przycisk przesyłania nie jest zgodny z modelem skrzynki. Użyłem szerokości 100px i pokazałem 98px + 2px dla granic, a pola tekstowe pokazały szerokość 100px + 2px dla granic.

Sądzę więc, że pytanie brzmi: jak sobie z tym poradzić w płynnym układzie? -1px prawy i lewy padding na przyciskach nie działa, a projekt wymaga 1 obramowania na przycisku! Czy będę musiał odwołać się do js?

Answer 1

Z jakiegoś powodu mozilla zestawy wejść typu tekstu -moz-box-sizing:content-box; ale przycisk submit jest ustawiony na -moz-box-sizing:border-box;

ustawiając następujące daje zamierzony renderowania w 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%; 
} 

Aktualizacja: wsparcie Dodany Safari i IE8 +

Answer 2

To naprawdę dziwne. Myślę, że granica 1px jest dodawana na zewnątrz twoich wejść tekstowych, więc ma szerokość 500 pikseli.

Choć na przycisk przesłać przycisk jest obliczana na bokach, ale pokazuje, w środku, więc masz 500px - 1px - 1px = 498px szerokości ...

Możliwym rozwiązaniem, które można zrobić, to po prostu stworzyć Poniższy kod 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; 
} 

To naprawi twój problem i nadal wyświetla przycisk przesyłania w Firebug jako szerokość 500 pikseli. A ponieważ twój formularz jest ustawiony na szerokość 500px i tak się nie zmienia, nie ma większego pożytku z wdrożenia szerokości ustawionej w procentach.

Answer 3

Uważam, że to sposób, w jaki przeglądarka oblicza wymiary wejściowe [type = submit]. Próbowałem zastosować niektóre resetowania, ale te też nie sprawdziły się. Jestem na Macbook Air z Chrome i na twoim przykładzie JSBin, podgląd w czasie rzeczywistym wyglądał dobrze, ale "Renderowanie" sprawdziło twój problem.

Próbowałem jsfiddle.net i pokazało ten sam problem. Oto sposób obejścia tego problemu, jeśli będzie on działał w Twojej aplikacji.Wystarczy usunąć obramowanie i tło z przycisku Prześlij i stylu div otoki zamiast, a następnie umieścić kliknij słuchacza na div przesłać formularz:

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/

ALTERNATYWNE NATIVE 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/

Answer 4

Nie wiem, to będzie pracować dla danego środowiska. Gdy grałem z jsbin, dostosowując width pracował ...

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

Testowane tylko na Chrome.