2013-10-29 21 views
5

Zor bir CSS sorunu yaşıyorum. Bu, web sitesinin "teması" için CSS'nin üçüncü taraf olduğu gerçeğiyle daha da kötüleşir (değiştirilemez, ancak başka bir stil sayfasıyla geçersiz kılabiliriz) ve sayfadaki her şey düzen için mutlak konumlandırmayı kullanır ve boyutlandırma (bu değiştirilemez).Windows için Chrome'u alt piksel çizgisi yüksekliğine uymaya zorlama

body { 
    line-height: 1.3; 
} 

sayfada bir div, 14px bir font-size sahiptir satır yüksekliğini 18.2px yapma: bu üçüncü taraf CSS

yerde, bu beyanı bulunmaktadır. Bu tipik web siteleri için iyidir. Ancak, her şey kesinlikle piksel konumlarını kullanarak konumlandırılmış olduğundan, yazı tipi oluşturma farklılıkları devreye giriyor. Özellikle, Windows'taki Google Chrome, bu line-height'u 18px'a yuvarlıyor. Bu, div'daki büyük içerik bloğunun, Windows için Chrome'da başka herhangi bir tarayıcıya göre önemli ölçüde daha kısa olduğu anlamına gelir. Diğer tüm tarayıcılar, alt piksel çizgi yüksekliklerini destekliyor gibi görünüyor.

Windows için Chrome'u diğer piksel tarayıcılardan daha farklı oluşturmayacak şekilde alt piksel çizgisi yüksekliğine uymaya zorlamanın bir yolu var mı? farkı gösteren

Güncelleme

Here's a JSFiddle. Windows için Chrome'da ve Windows için Firefox'taki yükseklikleri karşılaştırırsanız, satır başına bir 0.2px fark olduğunu görürsünüz.

+0

18.1'den 18'e yuvarlanan diğer tarayıcılar hakkında _not_ gerçekten emin misiniz? – kleinfreund

+0

Hem Chrome hem de Firefox'ta dev araçları kontrol ettim. Firefox 18.2px görüntüler, ancak yazı tipini rasterleştirmeyi tahmin ediyorum, her şey tüm piksellerde hizalanır. – kleinfreund

+0

Kesinlikle farklı şekilde işleniyorlar. Satır başına 0.2 px, birden çok satıra eklenir. – Jacob

cevap

0

Yapacağım şey, line-height'u tüm bir piksele çarpan bir şeye değiştirmektir. Durumunuzda:

line-height: 1.2857142857142857142857142857143; /* = 18/14 */ 

Bu, çıkışı biraz değiştirir ve tarayıcılar arası uyumlu sonuçla sonuçlanır.

Windows üzerinde Chrome ve Firefox'ta kemanınızla test ettim ve çalışıyor.

İlgili konular