Chrome'da garip kenarlık genişliği davranışı - Kayan nokta kenarlığı genişliği?

Bazı akışkan tasarımları, özellikle% -width iFrames içerenler, Chrome'da bazı garip yuvarlama türü hatalara neden oluyor gibi görünüyor (sürüm 21'e sahibim). Bu sorunu göstermektedir. Sınırı bir tamsayı piksel değerine ayarlayın ve istediğinizde geri aldığınız değerler, beklenen değerden biraz daha küçük kayan nokta sayılarıdır.Chrome'da garip kenarlık genişliği davranışı - Kayan nokta kenarlığı genişliği?

exact same code in CodePen'u denemek, muhtemelen iFrame ve çevresindeki diğer stiller aynı şekilde ayarlanmadığı için aynı sonuçları vermez. (Ben de temel genişliği için bu davranışı gördüm ve jsFiddle sorunun o kısmını çoğaltmak mümkün olmasına rağmen yüksekliği, bağlıyor.)

Bu Firefox'ta bir sorun gibi görünmüyor veya IE8'de.

Bu garip davranışa neyin neden olduğu ile ilgili herhangi bir fikir ve gerçek değerlere ulaşmak için etrafta nasıl çalışabilirim?

Arsa kalınlaşır. Soruna zarar verme girişiminde, 10px üzerindeki değerlerin konuya ait görünmediğini tespit ettim. GionaF yorumuyla @ dayalı Ayrıca

, ben şu anda Chrome'da bu davranışı yeniden edemez Chrome 22.

kaynak

2012-10-12 Chris Jaynes

Aslında 3px (krom 22) – Giona

Beh. @GionaF'a baktığınız için teşekkür ederiz. Ne yazık ki, şu anda yükseltme seçeneğim yok ... –

Son zamanlarda Chrome'la ilgili bir sorun yaşadım: tek genişlik bloğunu (49px)% 50 genişlikte konumlandırmaya çalışırken, biraz farklı konumlar elde ediyordum./- Tek ve çift ekran genişliğinde 1 piksel. Bu bloğun eşit olduğundan emin olmak için 1px dolgu eklemeyi çözdüm. Umarım bu bahşiş yardım eder. –

Sorununuzu yeniden üretmek için Chrome'un yakınlaştırma düzeyini değiştirmem gerekiyor. Yakınlaştırma seviyesini% 100'e geri getirmek onu düzeltir. Bir hata gibi görünüyor, hesaplanan kenarlık genişliği her zaman tanımlanmış kenarlık genişliğinden daha küçüktür, yakınlaştırma veya uzaklaştırma!

10px kenarlığınız, yakınlaştırma düzeyi% 110 olduğunda, ancak% 125 üzerinde 3px kenarlığınızla aynı soruna sahip olduğunda 10 değerini verir.

düzenleme: firefox aynı davranışı vardır!

kaynak

2013-05-24 16:29:44 Willem

Bu, sorunu yeniden oluşturmanın en güvenilir yoludur. Başlangıçta problem yaşadığımda bir zum seviyesine sahip olduğumu sanmıyorum, ama yakınlaştırma ile yeniden oluşturulabileceğini bilmek güzel. –

Benim durumumda, zoom'um% 90 olarak ayarlandı (bazen kaydırma düğmesini ve Ctrl tuşlarını kullandığım sıklıkta kullanıyorum) ve böylece 1px sınırlarım 1.11 piksel veya% 10 daha geniş olmalıdır. olmuştur. – redOctober13

düzgün çalışması için görünür, ancak bu davranış büyük olasılıkla Subpixel Rendering ile ilgisi var. Esasen, Webkit, kayan nokta uyuşmazlığını önlemek için tamsayı matematik kullanarak hesaplamalar yapar.

Şu anda, border'un, subpixel oluşturma özelliğini kullanmıyor gibi görünmesi, sorunun neden yeni Chrome sürümlerinde görünmediğini açıklayabilir.

kaynak

2013-05-19 14:35:13

Bu cevabı yükselttim, çünkü sanırım alt piksel oluşturma ile ilgili olması gerektiği doğrudur, ama Willem'in cevabının davranışları yeniden yaratmamı sağladığını sevdim. Sanırım kullandığım Chrome sürümünde bir alt piksel oluşturma hatası var, belki de yakınlaştırma ile ilgili olsa da, muhtemelen emin olmak için çok uzak. Cevaplamak için zaman ayırdığınız için teşekkür ederiz! –

Tüm öğeler için kutu boyutlandırmayı kenarlığa mı ayarlıyor? Bu, kutu modelinin kenarlık ve yastığın genişliği etkilemeyeceği şekilde hesaplanma şeklini değiştirecektir.

*, 
*:before, 
*:after { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; }

kaynak

2013-05-24 00:15:35 Alex

Ayrıca input s ve diğer öğelerle ilgili sorunu yaşıyordum. Bir saat süren harcanan süreden sonra, bu soruna neden olmak için beklenmedik bir sebep buldum. css normalize css kullanır ve aşağıdaki kod böyle soruna neden oldu Önyükleme:

hr { 
    -webkit-box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    box-sizing: content-box; 
}

Bu sorunu çözmek için, benim style.css css geçersiz:

hr { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
}

hr kural gerçekten ile ilgili değildir input s ama işe yarıyor. Bu gerçekten beklenmedik bir davranış, dene ve işe yarayacak.

kaynak

2017-11-03 06:43:28

Chrome'da garip kenarlık genişliği davranışı - Kayan nokta kenarlığı genişliği?

cevap

İlgili konular