lostyazilim
tr.link

Chrome Tarayıcıda HTML Tablo Hatası (1px) Hakkında

3 Mesajlar 1.005 Okunma
acebozum
tr.link

tedem tedem npm run dev Kullanıcı
  • Üyelik 17.04.2016
  • Yaş/Cinsiyet 27 / E
  • Meslek Full Stack Developer
  • Konum İstanbul Avrupa
  • Ad Soyad M** E**
  • Mesajlar 381
  • Beğeniler 266 / 133
  • Ticaret 20, (%100)
MyBB için yapımını sürdürdüğüm Metro temasını tamamlarken, tablo yapısında küçük bir hata gördüm.

Tema genel alan genişliği (.genelalan, .container, ve .row gibi) yüzdelik bir değere sahip ise, ekran çözünürlüğü %100 görünümünde, tablolar 1px kadar küçük gözüküyor.

Genel alan değeri aşağıdaki gibi olduğunda;

.container {
margin: auto auto;
width: 82%;
padding: 16px;
}


Ekran çözünürlüğü %100 görünümde aşağıdaki resimde bulunan 1px kadar küçüklük hatası ortaya çıkıyor;



Aynı şekilde başka bir tarayıcıda baktığımızda, sorun olmadığını görüyoruz;



Yukarıda açıkladığım tarayıcı hatasını kanıtlamak/daha iyi anlatmak için hazırlanmış bir resim;



Konu hakkında araştırma yaptığımızda, bu sorunun benden kaynaklanmadığını ve genel bir tarayıcı hatasını anlıyoruz;

Bkz: http://stackoverflow.com/questions/31719624/displaytable-div-with-percentage-width-1px-bug
Bkz: https://bugs.webkit.org/show_bug.cgi?id=140371

Hatanın çözümü için benim uyguladığım yöntem, genel olarak tanımladığım alana sabit bir değer atamak. Yani 82% yerine, 1024px gibi. Sabit bir değer vermeden bu hatadan kurtulmak isteyenler, genel alan genişliğine (.genelalan, .container, ve .row gibi) display: table ekleyebilirler.

Örneğin;

.container {
margin: auto;
padding: 16px;
width: 82%;
min-width: 1024px;
max-width: 1366px;
/* FIXME: http://stackoverflow.com/questions/31719624/displaytable-div-with-percentage-width-1px-bug */
display: table;
}


Konuyu açmamın amacı ise, bilmeyen arkadaşlarımızı bilgilendirmek ve bu hatayı alan kişilerin, benim gibi kendinden kaynaklanan bir sorun olduğunu düşünüp dakikalarca uğraşmaması içindir.

Saygılarımla, iyi forumlar.
 

 

elektronikssl
webimgo

ontedi ontedi www.ontedi.com Kullanıcı
  • Üyelik 03.10.2013
  • Yaş/Cinsiyet 44 / E
  • Meslek Yazılım Uzmanı, Matematikçi
  • Konum Ankara
  • Ad Soyad S** T**
  • Mesajlar 1118
  • Beğeniler 325 / 324
  • Ticaret 2, (%100)
Hocam, yüzde değer ile px değer arasında tutarsızlık olur.

Mesela, 100px kapsül için

.kapsul{width:82%;padding:9px;} değerleri doğrudur. Fakat 101px kapsül için bu değerler geçerli değildir.

O yüzden calc adlı bir yöntem mevcuttur.

Esnek tasarımlar için .kapsul{width:calc(100% - 18px);} yazımı doğru çalışacaktır.
 

 

www.ontedi.com
www.cizgi.site

tedem tedem npm run dev Kullanıcı
  • Üyelik 17.04.2016
  • Yaş/Cinsiyet 27 / E
  • Meslek Full Stack Developer
  • Konum İstanbul Avrupa
  • Ad Soyad M** E**
  • Mesajlar 381
  • Beğeniler 266 / 133
  • Ticaret 20, (%100)
Sizin anlatımınız sadece bu hatanın çözümlerinden birisi olabilir.

Konuda da belirttiğim gibi, diğer tüm tarayıcılarda düzgün çalışırken sadece Chrome tarayıcıda hatalı çalışıyor.

Bunun bir hata olduğu kanıtlanmış ve rapor edilmiş. Konuda gerekli bağlantıları paylaştım ama buraya da ekliyorum.

Bkz: https://bugs.webkit.org/show_bug.cgi?id=140371
 

 

wmaraci
wmaraci
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al