Bir CSS Akışkan Izgarası'nda Alt Piksel yuvarlama sorununu düzeltme

Akışkan CSS ızgara oluşturmaya çalışıyorum, Firefox ve IE8 + sürümlerinde çalışıyor ancak alt piksel yuvarlaklaştırması sorununun görülebileceği Safari/Chrome/Opera'da DEĞİLDİR:Bir CSS Akışkan Izgarası'nda Alt Piksel yuvarlama sorununu düzeltme

http://jsfiddle.net/bJKQ6/2/

.column { 
    float: left; 
    width: 25%; 
}

ana kap % 100 kadar bir genişliğe sahiptir, ve Safari/Krom/Opera'da tarayıcı boyutunu değiştirmek eğer yuvarlak genişlikleri tutarsız görebilirsiniz.

Sorun hakkında kapsamlı bir okuma yaptıktan sonra, alt piksel yuvarlaması için "doğru ya da yanlış bir çözüm bulunmadığını" anladım, ancak Firefox'un benim için en iyi tavizim olduğu anlaşılıyor. (Örneğin,% 25'lik bir genişlikte 4 divs'i ayarlarsanız, kaplanan alanın% 100 olmasını beklerim.)

Kaçırdığım bir CSS çözümü olup olmadığını öğrenmek isterdim Sorunu çözmek için JavaScript.

Teşekkürler!

GÜNCELLEME: Mayıs 2014 itibariyle, Chrome 33 ve Safari 7, "Firefox yolu" nu yakalamış görünüyor.

kaynak

2012-03-09 gyo

Birkaç gün önce benzer bir soruyu burada yanıtlamadım http://stackoverflow.com/questions/9914209/css-browser-pixel-rounding-overflow-hidden-with-percentages/9942854#9942854 tüm elemanlarda tam olarak aynı genişlikte, muhtemelen javascript olmadan alacağınız kadar yakın. –

Cevabınız için teşekkürler. Daha fazla esnekliğe sahip olmak için "sıra" sarıcıdan kurtulmak isterim, her satırda sarmak zorunda kalmadan bir başparmak galerisini gösteren kemanda başka bir örnek ekledim. – gyo

Stubbornella en OOCSS çerçevesi (aşağıda bağlantılar) son sütununu aşağıdaki geçersiz kılmaları vererek bu modül fiyatlarını ızgaraları: Bu kapsayıcı içindeki kalır ne olursa olsun genişlik işgal sağlar

float: none; 
overflow: hidden; 
width: auto;

tarayıcı forking Biraz (IE, ptzsch ...) aynı davranışı elde etmek gereklidir: yukarı ve aşağı piksel yuvarlamak olacağını bunun için güzel bir seçenek yoktur Berbat https://github.com/stubbornella/oocss/blob/master/core/grid/grids.css https://github.com/stubbornella/oocss/wiki/grids

kaynak

2012-09-11 14:23:57 Barney

Teşekkür ederim Barney, tek dezavantajı oldukça esnek olmayan lastUnit sınıfı var. – gyo

Ne demek istediğimi biliyorum - Ben şahsen yapısal sınıf isimlerinin esnek bir HTML'nin gerekli bir bileşeni olduğunu düşünürüm, ama bu bir çok şeyi eklemek anlamına gelir. Bunu söylemiş olursak, eğer ekstra sınıfların adil bir kısmından kaçınmak mümkündür. gelişmiş CSS 2.1 seçicilerini desteklemeyen tarayıcılara destek vermeye isteklidir: ".line> *' ve ".lastUnit" ile ".line> *: son-child" ile "unit" referanslarını değiştirin. – Barney

Hey @gyo, Yukarıdakilerin bir demosunu oluşturdum: http://jsfiddle.net/barney/7Bd8V/, sonra bir adım daha ileri gittim ve 'line' sınıfı hariç tüm kesirli genişliklerin eşit genişlikte olmasını isteriz: http://jsfiddle.net/barney/32Q8B/ – Barney

her tarayıcı için, ama bu yerine, genellikle yapın: px unalignment belli olmaması için

.nested:last-child { 
    float: right; 
} 
.nested:first-child { 
    float: left; 
}

Bu sağa son çocuğu yüzer, ancak yalnızca eleman (eğer diyelim bir div olduğunu % 33 genişliğindedir, daha sonra sola kaymaya devam edecektir.

kaynak

2013-05-15 16:57:11 Cory

Burada tanımlamak aynı sorun htt p: //stackoverflow.com/questions/9635347/fixing-sub-pixel-rounding-iss-in-a-css-fluid-grid/12371926#comment23915801_12371926 Öğenin bir sonraki satıra düşmesi gerekiyorsa, taşınır sağ. Tek uygun çözümün bir önişlemci kullanması ve satıcının önekleri ile uygun yönde ilerlemek için her bir öğe için ceil() ve katın() (Stylus, ancak SCSS'nin eşdeğerleri var) kullanılması gerektiğine inanıyorum. Bir şey bulursam rapor edeceğim ... – Cory

Bir CSS Akışkan Izgarası'nda Alt Piksel yuvarlama sorununu düzeltme

cevap

İlgili konular