Čudan CSS bug, solucija?

Programiranje
1

Radi se o poravnavanju slikice unutar nekog contenta…da drži sredinu po visni: http://jsfiddle.net/kizu/4RPFa/4570/

Mozilla radi bug, chrome u nekim slučajevima također. Znači na prvu se čini da su slikice na sredini, no probajte zadati frame-u visinu 20px, a img height:18px. Slica će ležati na donjem borderu!

Probajte frame 20px, slika 20px, slika će bježati van.

No da može dobro raditi, možete probati sa frame 23px, img 23px …tek od te veličine se poklapa.

Kombinacije frame 15px …img 11px su još gore. A na tim veličinama griješi i chrome. Tipa neće dobro prikazat frame 15px, img 15px.

Neću pitat kakav je to bug…al kako je najbolje poravnavati slikice po visini…da dodju tako na sredinu?

2

Lagano sam razočaran da je internet prepun raznih metoda…a da sve imaju neku manu. Sad mi je valjda jasno zašto ovoliko dugo nisam načistu sa tim vertikalnim poravnavanjem.

Krenuo sam zato iz temelja sam istraživati kako se ponašaju elementi u nekim specifičnim situacijama…i brzo zapeo na nepoznanici: http://jsfiddle.net/4RPFa/5964/

Zašto pobogu ovaj crveni element viri van, tko ga tjera. Jesam malo font smanjio…ali Bože mili zašto ga to gura van?

3

Da u pravu si vertikalno poravnanje je do sad uvijek bio problem u CSS-u, no ne još za dugo.
CSS je čudan i mušičav i mislim da se ovdje ne radi o nikakvom bug-u ako budem imao vremena sutra ću ovo malo dublje proučit pa vidit šta je na stvari(BUG ili tvoja greška :D)
Ovdje ima puno toga što igra ulogu i moraš znati koji layout mehanizam koristiti i u kojoj situaciji. Da bi to znao moraš znati pravila.
Crveni element će se vratiti ako mu daš vertical-align: middle;
Ovaj post bi ti trebao pojasniti kako vertical-align funkcionira.
http://christopheraue.net/2014/03/05/vertical-align/
Ako nisi na ti sa CSS specifikacijom sve živo će ti se činiti čudnim i ne prirodnim.
Ti hoćeš sliku vertikalno centrirati sliku unutar nekog kontenjera, right ?

4

Pa čim se mozilla i chrome različito ponašaju…očito nema pravila po kojem se može opravdati istovremeno ponašanje chrome-a i mozille. Ali ajd…veselim se objašnjenju.

I da, trebam stabilno nizanje elemenata, da je vertical-aling = middle. …i da se u tom nizu nalaze slike, tekst i containeri koji opet nose slike i tekst. I da se elementima ne podešava line-height koji se ne može izraziti u postotku parenta.

Za sad sam kao najbolje rješenje vidim ovo http://jsfiddle.net/4RPFa/5968/ jer mi omogućava da u tom nizu dodam container koji gore spominjem. Eto, volio bi čuti kako se ovo može elegantnije rješiti…

5

Ja nisam nisam primjetio ništa čudno, oboje se isto ponašaju. Uostalom nema veze ako se nešto ponaša na “A” način u Chromu ,a na “B” način u Firefox-u. Specifikacija neke stvari ostavi browser vendorima na izbor kako će ih tretirati ili implementirati. Ako misliš da je bug prijavi ga.

Teško je to ovako bez konteksta odradit.Ovako na osnovu nekakvih nadri DEMO-a ne mogu znati jeli ovo idealno riješenje. Samo znam da radiš nešto što se vrlo rijetko koristi. Jesu sve slike istih dimenzija. Elegantnog riješenja nema(a možda i ima), pogotovo ako su elementi unutar line-boxa različitih dimenzija.

http://jsfiddle.net/sgntfdzk/1/ ovako nešto
http://jsfiddle.net/og2e55k6/1/ ovako ili nešto treće ?

6

Trebalo bi stavljati u svaki css kod za poništavanje defaultnih postavki browsera, tj za one elemente koje nisu postavljene vrijednosti ne dozvoliti browserima da sami odlučuju o tome,

html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

Te postaviti također

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

znak asterisk znači da se odnosi na sve elemente na stranici. A parametar box-sizing znači da kada stavite element na 100% bude stvarno 100% tj. border i ostale stvari koje bi inače bile sa vanjse strane i element bi bio preko 100% stavlja sa nutarnje strane, i mnogo je lakše sa takvim postavkama raditi pogotovo kod responsive stranica.
eto…

1 Like
7

Jesi probao staviti height 20px za frame i 20px za image u mozilli?

Tvoj prvi primjer me zbunio, pozitivno ali zbunio. Evo malo modifikacije: http://jsfiddle.net/sgntfdzk/3/
…znaci maknuo sam display:table za body…i niš se nije raspalo. Ispada da samo vertical-align radi. No zašto je uopće onda cijeli internet zapeo sa tim align-om i ja skupa s njima xd

Aha, kužim. Problem je u tome da je ocke dok se ne zadaje height divu koji nosi vertikalno posložene elemente. Evo kad više ne štima http://jsfiddle.net/sgntfdzk/4/ Bit će red da proučim materijal koji si dao o vertikalnom alignu.

Ovaj drugi primjer sa display:flex, nemam pojma zašto sam to zaobišao. Koji su nedostaci uopće te metode?

8

Da vidim neku razliku od 1piksela u mozilli.Može biti neki mali bug. Prijavi samo ne znam koji radi pravilno, a koji ne. Stackoverflow bi ti ovdje mogao pomoći.
Problem je što ja ne znam detalje, a ovako na slijepo ti ne mogu govorit jeli to to. Imaš li živu stranicu ? Ja bi ti preporučio da se makneš od vertical-align svojstva jer je em staro svojstvo iz 90-ih i njegova namjena nije ovo za što ga i ti i ja koristimo.Ono služi za neko light poravnanje text-a tipa kad trebaš koristiti index na nekoj riječi tipa H2O(a kad ga koristiš kod table layout onda ima drugo značenje), ovo što mi pokušavamo je forsiranje nečeg što jednostavno ne ide i imati ćeš problema kad napraviš neku najmanju promjenu.
Flexbox nema mana jedino ako ti je problem podrška (ne radi u IE9 i ispod). Može se centrirat ali je puno teže nego što bi to trebalo biti. Trenuto se razvija nova specifikacija baš za ovo ali dok to sazrije proći će još koja godina.
http://css-tricks.com/centering-css-complete-guide/ evo maestro Chris je napisao sve moguće metode pa prouči i odaberi koja ti paše.

9

Ockej, hvala.

Btw…ako u prvom primjeru kreneš smanjivati frame prema manjim vrijednostima…tipa 15 px…paralelno smanjuješ i img. Greške postaju puno veće!

1 Like