Twitter forma bootstrap pola zbyt małe

Question

Znam ten temat „brzmi” jak wiele innych osób, które są tam, ale ja przejrzałem wszystkich istniejących wątków (no „większość” w każdym razie) i nadal mam problem, mogę używać pomoc na ...

problemem nie jest zbyt niepodobny do tego, co inni opisali:

• Pewne elementy tworzą nie wyświetla pełnej wysokości pionowe
• najbardziej zauważalną wśród nich jest typ wejścia wygląda trochę anemicznie, gdy siedzi obok przycisku lub "add-on" class
• Niedawno zauważyłem jeszcze poważniejszy problem ... przyciski radiowe stają się "kropkami radiowymi", ponieważ są tak małe, że są ledwo widoczne.

Teraz dużo ludzi rozwiązać ich problem, upewniając się, że określono DOCTYPE poprawnie na szczycie swojej dokumentu HTML. Ja też odkryłem, że ta prosta regulacja zrobiła lewę w mojej statycznej makiety HTML. Niestety, kiedy przełączyłem się na Wordpressa, problem ponownie się pojawił, a mimo to zdecydowanie umieszczam podpis HTML DOCTYPE na samej górze wyjścia (sprawdziłem to kilka razy z "źródłem widoku", ponieważ myślałem, że może straciłem umysł).

Dołączyłem szybkie zdjęcie ekranu na wypadek, gdy pomoże to rzucić światło na to. Można go znaleźć tutaj: http://www.flickr.com/photos/14261777@N00/6957941282/. Zwróć uwagę na maleńkie kropki na dole, które mają być przyciskami radiowymi. Bardziej oczywiste są pola INPUT, które nie są wystarczająco wysokie. Och, a także dla kompletności, oto zrzut ekranu pokazujący, jak zaczyna się moje źródło HTML: http://www.flickr.com/photos/14261777@N00/6957952802/.

Chciałbym usłyszeć od każdego, kto ma teorię, dlaczego to może się dziać i żadnego rozwiązania, które mogłyby istnieć (nawet jeśli źródłem tego rozwiązania jest nieznany). Próbowałem narzucać atrybuty CSS, takie jak wysokość linii, wysokość, min-wysokość itp. I kilka innych z zerowym efektem.

Answer 1

Wygląda na to, że masz dwa problemy. Problem z input type=text i problemem przycisku . Nie widząc kodu, wygląda na to, że problem z polem tekstowym jest powiązany z DOCTYPE, a problem z przyciskiem radiowym jest powiązany z nadpisującymi stylami CSS (można potwierdzić, jeśli publikujesz wyniki inspektora dla przycisków radiowych).

Jeśli zmienne są wyświetlane jako prawidłowe wartości (np. 18px wysokość), które są, to z całą pewnością jest to numer DOCTYPE.

Od this article na listę APT:

Zrobiłeś wszystko prawo rzeczy, ale witryna nie wygląda lub praca jako to należy w najnowszych przeglądarkach.

Napisałeś poprawny XHTML i CSS. Użyto standardowego modelu dokumentu W3C (DOM) do manipulowania dynamicznymi elementami strony. Jednak w przeglądarkach zaprojektowanych do obsługi tych właśnie standardów Twoja witryna jest uszkodzona w . Prawdopodobnie przyczyną jest wadliwy DOCTYPE.

Ten mały artykuł zawiera opisy DOCTYPE, które działają i wyjaśniają praktyczny, rzeczywisty efekt tych pozornie abstrakcyjnych tagów.

Oto zalecana lista DOCTYPEs zgodnie W3C:

http://www.w3.org/QA/2002/04/valid-dtd-list.html

Answer 2

Jeśli ktoś jest zainteresowany, oto co dodałem, aby rozwiązać problem:

input, input[type="text"], input[type="radio"], isindex, .uneditable-input { 
    padding: 4px; 
    border-bottom-width: 1px; 
    border-bottom-style: solid; 
    border-bottom-color: #CCC; 
    border-left-width: 1px; 
    border-left-style: solid; 
    border-left-color: #CCC; 
    border-right-width: 1px; 
    border-right-style: solid; 
    border-right-color: #CCC; 
    border-top-width: 1px; 
    border-top-style: solid; 
    border-top-color: #CCC; 
    border-top-left-radius: 3px; 
    border-top-right-radius: 3px; 
    border-bottom-left-radius: 3px; 
    border-bottom-right-radius: 3px; 
} 

.input-append .add-on, .input-append .btn { 
    margin-left: -6px; 
} 

input[type=checkbox] { 
     -webkit-appearance: checkbox; 
}