Bu sürekli beni rahatsız eden küçük CSS sorunlardan biridir. Nasıl dikey hizalama StackOverflow kutularını ve etiketleri arkadaşlar sürekli tarayıcı geçemez. Doğru Safari (genellikle giriş vertical-align: baseline) kullanarak onları hizalamak zaman, Firefox tamamen kapalı ve IE ediyorlar. Firefox tamir, Safari ve IE kaçınılmaz olarak berbat. Ben her zaman ben bir form kodu bu zaman kaybı.

Burada birlikte çalıştığım standart kodu:

<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

Ben genelde Eric Meyer'in sıfırlama, böylece form öğelerinin geçersiz kılar nispeten temiz kullanın. İleri herhangi bir ipucu arıyor ya da teklif var hileci!

İnce ayar, test, işaretleme ve farklı stilleri çalışırken bir saatten sonra, iyi bir çözüm olabilir düşünüyorum. Bu özel proje için gereksinimleri:

1. Giriş kendi satırında olmalıdır
2. Checkbox giriş dikey etiket metni keza (aynı şekilde) tüm tarayıcılar arasında uyum gerekiyor
3. Eğer etiket metni kaydırma, (onay kutusunun altındaki aşağı kaydırma yok yani) girintili olması gerekiyor

Herhangi bir açıklama girmeden önce, sadece sana kodu vereyim:

<form>
    <div>
        <label><input type="checkbox" /> Label text</label>
    </div>
</form>

<style type="text/css">
label {
    display: block;
    padding-left: 15px;
    text-indent: -15px;
}
input {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: bottom;
    position: relative;
    top: -1px;
    *overflow: hidden;
}
</style>

Burada JSFiddle çalışma örneği

Bu kod, form giriş kenar boşlukları ve doldurma (dolayısıyla giriş CSS kenar boşluğu ve dolgu sıfırlar koyarak) geçersiz kılmaz ki Eric Meyer gibi bir reset kullandığınız varsayılmaktadır. Canlı bir ortamda açıkçası muhtemelen başka şeyler girdi öğeleri desteklemek için geçersiz kılma/iç içe olacağım, ama şeyleri basit tutmak istedim.

Dikkat edilmesi gerekenler:

• *overflow bildirimi bir satır içi YANİ hack (star-özellik hack). IE 6 ve 7 fark etmez, ama Safari ve Firefox düzgün göz ardı eder. Geçerli CSS olabilir, ama yine de koşullu yorum daha iyisin; sadece basitlik için kullanılır.
• Sana söyleyebileceğim en iyi şey olarak, tarayıcılar arasında tutarlı olduğunu vertical-align Tek ifadesi vertical-align: bottom oldu. Bu ve daha sonra yukarıya doğru konumlandırma nispeten ayarı neredeyse tek bir piksel ya da farklılık iki ile Safari, Firefox ve IE aynı davranışları sergiledi.
• Uyum ile çalışmak için en büyük sorun IE giriş öğeleri etrafında gizemli alan bir grup sopalarla. Dolgu veya marjı değil, lanetli ve kalıcı. Onay kutusu üzerinde bir genişlik ve yükseklik ayarı ve daha sonra bazı nedenlerden dolayı overflow: hidden ekstra alan keser ve IE konumlandırma çok benzer şekilde Safari ve Firefox için hareket sağlar.
• Metin boyutlandırma bağlı olarak, şüphesiz göreli konumlandırma, genişliği, yüksekliği, ve doğru şeyler getirmek için benzeri ayarlamak gerekir.

Bu başkası yardımcı olur umarım! Herhangi bir proje bu sabah, eğer çalışan bir şey bulursanız o kadar kesinlikle boru hakkında daha fazla sürekli çalışıyordum dışındaki bu özel tekniği denemedim.