2016-10-04 13 views
5

Tümü otomatik genişliğe sahip bir satır içi satır öğesi satırım var, bu nedenle her birinde değişen metin içeriğinin yanı sıra biraz dolgu gibi geniş bir çizim çiziyorlar. Bu, fraksiyonel piksellere sahip her elemanın gerçek genişliğine yol açar.Genişlik ayarlı bir öğede kesirli pikseller nasıl önlenir?

Bu iyi olurdu, ancak her öğe, piksel ızgarasıyla hizalanmadığında çizilmeye karşı çok hassas olan bir simge yazı tipini içeriyor, alt piksel oluşturma, glifin kökü bir tamsayı değilse, yalnızca kötü ve bulanık görünüyor piksel değeri.

Ondalık piksel değerlerini önlerken bu elemanların genişliğini nasıl dinamik tutabilirim? Örneğin, elemanlardan biri 61px'e yuvarlanmak istediğimde 60.183 piksel genişliğiyle biter. Sass, ciel() 'i mükemmel yapabilir, ama bunu otomatik değerlere uygulamak için hiçbir yol yoktur.

Veya alternatif olarak, simge gliflerinin, kapsayıcı genişliklerini yuvarlamadan tam bir tamsayı piksel olan bir kökene sahip olduğundan emin olmanın herhangi bir yolu var mı?

Bu elemanlar kullanılma biçiminden dolayı, bunu JS ile yapmaktan ve bir CSS/SASS yalnızca çözüm bulmaktan kaçınmak isterim.

+0

[CSS yüzde değerlerinin tam sayı pikseline nasıl yuvarlanması gerektiği] için olası bir kopyası (http://stackoverflow.com/questions/22191086/css-how-to-round-of-percent-values-to-whole- sayı-piksel) – Serlite

+0

Hmm, bu benzer bir sorudur, ancak cevapların veya yorumların hiçbiri gerçekten sorunu çözmez. Buradaki asıl mesele, simgelerin tamsayı piksel kökenlerine sahip olması gerektiği ve bunu gerçekleştirmenin tek yolunun, kapların genişliğini yuvarlamak olduğunu söyleyebilirim. – Kris

+0

Bu sorudaki ana paket, değer yuvarlamanın yalnızca CSS kullanarak zorlamak mümkün olmamasıdır. Yine de, bu yazıyı ikon fontları oluştururken okumak isteyebilir: http://stackoverflow.com/questions/12642991/using-an-icon-font-font-awesome-looks-a-little-blurred-and-too- cesur – Serlite

cevap

10

Ekranı kullanıyorsanız: satır içi tablo; ekran yerine: satır içi blok; Tam piksel genişlikleri/yükseklikleri oluşturmaya zorlar. Bu, sorununuzu düzeltebilir ancak tablo/satır içi tabloyu kullanarak, bazı tarayıcılarda kapsayıcıdaki alanı kapatabilirsiniz, böylece içeriği başka bir öğeye sarmanız gerekir.

+0

Harika! Sadece bilmene izin vermek için: 9 Kez attım. Bu da piksel fontları ve otomatik witdths/margins ile kötü bir sorunu giderir. – Chris

+0

Bu işe yarıyor! _why_ ile ilgili herhangi bir bilgi var mı? – Kris

+0

@Kris Tabloyu nasıl oluşturması gerektiğine inanıyorum, tablolar çoğu öğeye göre çok daha 'katı' olduğundan, tüm satırlar/sütunlar aralarında boşluk bırakmadan gösterilmeli, bu yüzden piksel düzenini zorlamak gerekiyor sanırım alt piksel boşluklarından kaçınmak için. Ama bunun çoğunlukla spekülasyon olduğunu itiraf ediyorum, başka herhangi bir içgörüye sahip olup olmadığını bilmek isterdim. – Steve