A zatem od początku… Tworzymy input o z góry nieokreślonej szerokości – chcemy aby idealnie dopasowywał się do zawartego w nim tekstu. Okazuje się jednak, że IE7 dodaje po bokach padding, rosnący wraz z długością wyrazu…

Kod:

<input type="submit" value="IE width problem" class="ie7" />

Trochę stylu:

<style>
.ie7 {
  background: #a3e1fa;
  border: 0;
  font-size: 12px;
  padding: 0;
}
</style>

Efekt:

Chrome:
Firefox:
Internet Explorer 7:
Internet Explorer 8:
Internet Explorer 9:
Opera:

Jak zatem widać, IE7 nie specjalnie chce z nami współpracować, lecz jest na to proste rozwiązanie – wystarczy nasz styl dotyczący inputa uzupełnić dosłownie o dwie linijki:

<style>
.ie7 {
  background: #a3e1fa;
  border: 0;
  font-size: 12px;
  padding: 0;
  width: auto;
  overflow: visible;
}
</style>

Efekt murowany: