Dlaczego dane wejściowe i wybrane nie mają tej samej szerokości?

Question

Mam stół z dwoma rzędami. Pierwszy wiersz zawiera input, a drugi wiersz zawiera select. Mimo że ustawiłem ich szerokość na 100%, pole wyboru jest kilka pikseli mniejsze niż dane wejściowe. Jakiekolwiek pomysły, dlaczego tak się dzieje i jak ustawić ich szerokość tak, aby były równe sobie nawzajem i jak największe (np.% 100) w sposób, który działa we wszystkich przeglądarkach (klasy A)?

<table width="100%" style="margin-top: 5px;"> 
<tr> 
    <td width="35"><label for="desc">Description</label></td> 
    <td> 
     <input type="text" style="width: 100%;" name="desc" id="desc" /> 
    </td> 
</tr> 
<tr> 
    <td width="35"><label for="group">Group</label></td> 
    <td> 
     <select id="group" name="group" style="width: 100%; line-height: 17px;">    
      <option value="val">name</option>    
     </select> 
    </td> 
</tr> 
</table> 

Answer 1

To po prostu wydaje się być problemem z różnym wyglądem elementów przeglądarki. Spróbuj w pełni zdefiniować ich style, takie jak szerokość obramowania itp.

Answer 2

Dzieje się tak, ponieważ przy wprowadzeniu >, obramowanie i dopełnienie są dodawane na szerokość (jak w przypadku większości innych elementów). Przy <wybierz>, obramowanie i dopełnienie jest zawarte w szerokości, podobnie jak w starym trybie dziwactw IE.

Można obejść to przez zwiększenie szerokości w celu uwzględnienia tego, jeśli wiesz, szerokość w pikselach:

input { width: 200px; padding: 10px; border-width:5px; } 
select { width: 230px; padding: 10px; border-width:5px; } 

Albo (jeśli można liczyć na wsparcie przeglądarki) można korzystać z nowej CSS3 box-zaklejania właściwość, aby je zachowywać konsekwentnie i narysuj dopełnienie i obramowanie poza szerokość elementu:

input, select { 
    width: 200px; 
    padding: 10px; 
    border-width:5px; 
    -webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: content-box; /* Firefox, other Gecko */ 
    box-sizing: content-box;   /* Opera/IE 8+ */ 
} 

Alternatywnie, można ustawić box-zaklejania do border-box, aby wejść zachowywać jak wybiera, z wyściółka narysowana wewnątrz szerokości pudełka.

Testowany w Chrome, IE8, FF