Giriş genişliği vs boyutu

SORU

26 EYLÜL 2009, CUMARTESİ

Giriş genişliği vs boyutu

<input name="txtId" type="text" size="20" />

<input name="txtId" type="text" style="width: 150px;" />

Hangisi çapraz tarayıcı optimal bir şifre mi?

Elbette gereksinimleri bağlıdır, ama insanlar ve neye dayanarak karar nasıl olduğunu merak ediyorum.

CEVAP

26 EYLÜL 2009, CUMARTESİ

Her ikisi de kullanabilirsiniz. Css stil olacak geçersiz kılma size öznitelik tarayıcılar bu desteği CSS ve alan genişliği doğru, ve o bunu yok edecek, geri düşmek için belirtilen sayıda karakter.

Düzenleme:size öznitelik boyutlandırma kesin bir yöntem olmadığını söylemeliydim: according to the HTML specificationgerekirgiriş görüntüleyebilir anda olacak geçerli yazı tipi karakter sayısına bakın.

Yazı tipi belirtilen sabit genişlikli/tek aralıklı bir yazı tipi olmadıkça budeğilbelli ki, farklı karakterler, farklı genişlikleri. çünkü belirtilen sayıda karakter aslında görünür olacağının bir garantisi: This question bazı iyi cevaplar bu konu ile ilgili.

Parçacık aşağıda her iki yaklaşım gösterir.

@font-face {
  font-family: 'Diplomata';
  font-style: normal;
  font-weight: 400;
  src: local('Diplomata'), local('Diplomata-Regular'), url(http://fonts.gstatic.com/s/diplomata/v6/8UgOK_RUxkBbV-q561I6kFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
}
@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Cond Light'), local('OpenSans-CondensedLight'), url(http://fonts.gstatic.com/s/opensanscondensed/v10/gk5FxslNkTTHtojXrkp-xBEur64QvLD-0IbiAdTUNXE.woff2) format('woff2');
  unicode-range: U 0000-00FF, U 0131, U 0152-0153, U 02C6, U 02DA, U 02DC, U 2000-206F, U 2074, U 20AC, U 2212, U 2215, U E0FF, U EFFD, U F000;
}
p {
  margin: 0 0 10px 0;
}
input {
  font-size: 20px;
}
.narrow-font {
  font-family: 'Open Sans Condensed', sans-serif;
}
.wide-font {
  font-family: 'Diplomata', cursive;
}
.set-width {
  width: 220px;
}

<p>
  <input type="text" size="10" class="narrow-font" value="0123456789" />
</p>
<p>
  <input type="text" size="10" class="wide-font" value="0123456789" />
</p>
<p>
  <input type="text" size="10" class="narrow-font set-width" value="0123456789" />
</p>
<p>
  <input type="text" size="10" class="wide-font set-width" value="0123456789" />
</p>

Bunu Paylaş: