Problem z <typem wejściowym = "tekstem" /> i <textarea> szerokość

W poniższym kodzie zarówno elementy INPUT, jak i TEXTAREA są szersze niż powinny. Jak mogę ograniczyć je do 100% powierzchni użytkowej w dziale div?Problem z <typem wejściowym = "tekstem" /> i <textarea> szerokość

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <style> 
     .mywidth{ width:100%; } 
    </style> 
</head> 
<body> 
    <div style="border: 3px solid green; width: 100px;"> 
     <input class="mywidth" ><br /> 
     <textarea class="mywidth"></textarea><br /> 
     <div style="background-color: yellow;" class="mywidth">test</div> 
    </div> 
</body> 
</html>

Uwaga: Jeśli usunąć DOCTYPE, to czyni zgodnie z oczekiwaniami, przy wejściu, TEXTAREA i wewnętrznej DIV wszystkim tę samą szerokość i nie wychodząc na zewnątrz zawierającego DIV.

Aktualizacja: Nie naruszając domyślnych granic tych elementów, nadal wydaje się niepoprawnie renderować w IE7.

Źródło

2008-11-03 Larsenal

Wejścia i pola tekstowe oba mają granic domyślnie

<style> 
    .mywidth{ 
    width:100%; 
    border:0; 
    } 
</style>

odda wszystkie elementy wewnątrz kontenera.

Aktualizacja

IE ma również lewy i prawy margines z każdej elementu oraz następujące css pasuje do wszystkich elementów w pojemniku w FF3, FF2, Safari 3, IE6 i IE7.

<style> 
    .mywidth{ width:100%; border:0; padding-left:0; padding-right:0; } 
</style>

Jednak nie należy zapominać, że prawdopodobnie trzeba będzie granicy, a może wyściółka też, w celu uczynienia pola wyświetlane użytkownikom, jak zwykle. Jeśli ustawisz tę granicę i dopełnisz siebie, wtedy będziesz wiedzieć, jaka jest różnica pomiędzy przeglądarkami, między szerokością kontenera a szerokością, którą musisz podać elementom input/textarea.

Źródło

2008-11-03 18:19:15 philnash

Czy próbowałeś? Sprawdź IE7. Nadal wgryza się w zieloną granicę na zawierającym div. – Larsenal

Przepraszam, jestem na Macu! Zobaczę, co mogę zrobić w IE7. – philnash

można spróbować za pomocą tego DOCTYPE zamiast

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Źródło

2008-11-03 18:17:48

nie wydaje się to naprawić. – Larsenal

Brak opcji DOCTYPE spowoduje wymuszenie przeglądarki na tryb dziwactwa, używając starego, niepoprawnego modelu skrzynki, który nie określa granicy jako części szerokości. – philnash

Lub ... '': P –

Dodaj "dopełniacz-prawo: 3px;" do elementu div, który brzmi:

<div style="border: 3px solid green;padding-right:3px; width: 100px;">

Po dodaniu obramowania do elementu div, który również liczy się jako przestrzeń wewnętrzna elementu div.

Powodem działa bez deklaracji doc jest to, że przeglądarka nie renderuje stronę jako XHTML przejściowym, ale zwykły stary html, który ma inną metodę renderowania dla div itp

Źródło

2008-11-03 18:23:08

@Phil ma odpowiedzi powyżej.

Nawiasem mówiąc, użycie Firebug rzeczywiście pokazuje domyślne granice na powierzchni tekstu i elementach wejściowych. Tak więc użycie Firebug mogło pomóc.

Źródło

2008-11-03 18:23:40

Wygląda dobrze w FF, ale nadal jest renderowanie niepoprawnie w IE7. – Larsenal

xhtml sztywny kod wydaje się to robić w formularzach. Po prostu wprowadzam dane wejściowe i tekstowe na poziomie 99% i to wydaje się działać. spróbuj.

Źródło

2009-07-18 15:03:20

Miałem ten sam problem. Kiedyś właściwość box-zaklejania tu wymienić:

How can I make a TextArea 100% width without overflowing when padding is present in CSS?

Oto jak to wyglądało dla mnie:

<style> 
    .mywidth{ 
    width:100%; 
    -moz-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    } 
</style>

Źródło

2010-07-22 13:24:40 bmaupin

To powinno być wybrane jako poprawna odpowiedź, dziękuję! –

To nie zadziała w IE7 lub mniej, ponieważ starsze przeglądarki nie obsługują rozmiarów skrzynek. Powinieneś także pamiętać o włączeniu opcji '-ms-box-sizing' i zawsze wymieniać aktualną właściwość CSS3 (' box-sizing') jako ostatnią, aby po zaimplementowaniu przez przeglądarkę rzeczywistej własności CSS nadpisała ona wersję specyficzną dla danego dostawcy. – RussellUresti

@RussellUresti: dobra rozmowa, zaktualizowałem swoją odpowiedź na podstawie Twojego komentarza – bmaupin

Problem z <typem wejściowym = "tekstem" /> i <textarea> szerokość

Odpowiedz

Powiązane problemy