Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: CSS i Przeglądarki
Forum PHP.pl > Inne > Hydepark
arrtxp
19.05.2013, 13:26:22
Witam,
niestety ale zastanawia mnie czemu każda przeglądarka wyświetla dowolną stronę... inaczej...

Pomijam już produkt Mirosoftu...

Ale np: Chrome inaczej wyświetla tekst niż Firefox.

Nie wiem czy to zauważyliście ale tak jest...

Np:

Mam takiego div'a:
[HTML] pobierz, plaintext 
  1. <div style="border: solid 1px black; font-size: 8px; font-family: verdana; font-weight: bold;">
  2. COŚ
  3. </div>
[HTML] pobierz, plaintext


Na chromię litery będą najerzdzać na ramkę a na Firefox już nie...
To mi przeszkadza bo to psuje szyk mojej strony...

Dlaczego nie stworzą jednego stadardu ? Bardzo mnie to irytuje, że każda przeglądarka innaczej wyswietla moje strony...
lobopol
19.05.2013, 13:41:32
1. Różne firmy niezbyt się dogadują
2. Każda przeglądarka ma jakieś swoje własne style do elementów(paddingi/line-height/margin/etc.) użyj jakiegoś css reseta
kamil4u
19.05.2013, 13:47:40
Cytat
użyj jakiegoś css reseta

Ew. w większości wypadków wystarczy na początku CSS:
Kod
*{ margin: 0; padding: 0; }
arrtxp
19.05.2013, 14:47:15
Sory chłopaki... jak by reset pomógł to bym tego wątku nie zakładał...
kamil4u
19.05.2013, 17:16:18
To wrzuć demo na swój serwer wraz ze screenami do obu przeglądarek. Przed chwilą zrobiłem test u siebie i pod FF i Chrome jest identycznie, więc może błąd popełniasz gdzie indziej.
arrtxp
19.05.2013, 19:34:21
Dam Ci prosty przykład, włącz wp i zobacz na Firefox jak wygląda napis " Niedziela, 19 maja 2013 imieniny: Piotra, Kryspina ", a jak na Chromie.
Chodzi o to, że na Chromie tekst jest podniesiony o jeden pixel.

W przypadku:

<div style="padding: 3px; border: solid 1px black;">tekst</div> zamiast odstępu na górze 3px będzie 2px... a nad dolę 3px.



Tekst nie będzie na chromię na środku... i to mnie denerwuje... i zgóry trzeba ustalać wielkość diva, aby było menu wyglądało tak samo jak na Firefox...
lobopol
19.05.2013, 19:43:08
Widać, że line-height jest inny bo obie przeglądarki mają go domyślnie różny, css reset (oczywiście dobry, a nie ten * {margin etc.} to ogrywa
arrtxp
19.05.2013, 20:04:43
No... no ... no... ile razy mam pisać, że reset nie pomaga... to wada Chrome.
lobopol
19.05.2013, 20:22:24
Wybacz, bzdury w tym momencie piszesz: http://jsfiddle.net/9S4pL/3/ ff i chrome pixel perfect http://files.tinypic.pl/i/00387/u2lmibmd80na.png te same wysokości i pozycje
arrtxp
19.05.2013, 21:00:19
Proponuje Ci utworzenie pliku html i sprawdzenie tego w praktyce a nie przez javascript.
com
19.05.2013, 21:21:48
Wrzuć jakiś screen z tym jak jest u Ciebie, bo nie ważne gdzie to sprawdzamy, wszedzie efekt zawsze jest taki sam wiec problem nie leży po stronie przegladarki tylko gdzieś u Ciebie... Pozatym na kompie działa tak samo wink.gif
Monter08
19.05.2013, 21:22:33
Cytat(arrtxp @ 19.05.2013, 22:00:19 ) *
Proponuje Ci utworzenie pliku html i sprawdzenie tego w praktyce a nie przez javascript.

Jakie javascript? tongue.gif
arrtxp
19.05.2013, 21:27:52
@mon
a na czym oparta jest ta strona: http://jsfiddle.net/9S4pL/3/ facepalmxd.gif

Może różnicy nie widzicie, ponieważ to tylko jeden pixel...
http://images.tinypic.pl/i/00387/oqecpz2m9542.png
com
19.05.2013, 22:20:27
Ok teraz widać oco ci chodziło, tylko to nie chrome ma z tym problem a własnie firefox, bo tak jak jest w chrome jest też w Operze 12 i nawet IE 9 biggrin.gif poprostu firefox inaczej mierzy pixele...
lobopol
20.05.2013, 05:33:13
Słuchaj w demie którym pokazałem nie używam do niczego javascriptu http://jsfiddle.net/9S4pL/3/embedded/result/ zrobiłem screena na 2 przeglądarkach ustawiłem obrazki obok siebie i jak widać wszystko jest dokładnie obok sibie masz lepsze screeny: http://zapodaj.net/27afc4dc60496.png.html

lewa góra chrome prawo i dół firefox jest idealnie to samo, masz twardy dowód na to.

Na jsfiddle strona wyświetlająca jest oparta na html to jest zwykła ramka
Kocurro
20.05.2013, 08:13:24
arrtxp: ale pokaż może pełny kod źródłowy strony dla której masz taką niespójność. Bo inaczej to wróżenie z fusów nas czeka.
!*!
20.05.2013, 10:27:09
@arrtxp jak już chcesz coś udowodnić, to wypadałoby pokazać kod w całości. Idąc dalej, na Twoim zrzucie ekranu widać że z kodowaniem masz coś nie tak, a to może przekładać się na renderowanie fontu w przeglądarce jaki ma ustawione.
czachor
20.05.2013, 10:46:34
I dlatego do każdego projektu załączam normalize.css stąd: https://github.com/necolas/normalize.css/
arrtxp
20.05.2013, 11:19:01 
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <style>
  4. * {
  5.     margin: 0;
  6.     padding: 0;
  7.  
  8. }
  9. body {
  10.     font-size: 8px;
  11.     font-weight: bold;
  12.     font-family: Verdana;
  13.     line-height: 12px;
  14.     color: #000;
  15. }
  16. div { 
  17.     color: #ccc;
  18.     padding: 3px; 
  19.     background: #222;
  20.     border: solid 1px black;
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <div>COS</div> zamiast odstępu na górze 3px będzie 2px... a nad dolę 3px.
  26. </body>
  27. </html>
[HTML] pobierz, plaintext


Kodowanie znaków nic nie zmienia, a na operze masz tak samo, bo opera od niedawna korzysta z tego samego silnika co chrome...
I to Firefox poprawnie wyświetla ! Bo odstęp od ramki do napisu ma wynieść 3px a nie 2px jak to jest na Chromie...
!*!
20.05.2013, 11:33:33
Nie widzę powodu dla którego line-height miałby być ustawiony dla body, bo to on jest tego przyczyną. Wszytko inne jest "poprawne" i wygląda wszędzie tak samo.

Cytat
a na operze masz tak samo, bo opera od niedawna korzysta z tego samego silnika co chrome

Nie, nadal jest to presto.
arrtxp
20.05.2013, 11:46:09
Cytat(!*! @ 20.05.2013, 12:33:33 ) *
Nie widzę powodu dla którego line-height miałby być ustawiony dla body, bo to on jest tego przyczyną. Wszytko inne jest "poprawne" i wygląda wszędzie tak samo.


A co twierdzisz, ze " line-height " nie należy dodawać w body ? Może Ty nie widszisz róznicy w postaci 1px... ale mnie to przeszkadza...

Cytat(!*! @ 20.05.2013, 12:33:33 ) *
Nie, nadal jest to presto.


Chodzi o silnik do obsługi css, opera teraz korzyszta webkit... tak jak chrome.
!*!
20.05.2013, 11:54:18
Cytat
A co twierdzisz, ze " line-height " nie należy dodawać w body ? Może Ty nie widszisz róznicy w postaci 1px... ale mnie to przeszkadza...

Wiesz w ogóle do czego line-height służy? Strona renderuje się tak jak ja napisałeś

Cytat
Chodzi o silnik do obsługi css, opera teraz korzyszta webkit... tak jak chrome.

Nie. Nadal jest to presto.
arrtxp
20.05.2013, 11:59:52
Cytat(!*! @ 20.05.2013, 12:54:18 ) *
Wiesz w ogóle do czego line-height służy? Strona renderuje się tak jak ja napisałeś


Jaką masz wersje przeglądarek i systemu operacyjnego ?

Cytat(!*! @ 20.05.2013, 12:54:18 ) *
Nie. Nadal jest to presto.


Ech... http://www.zdnet.com/opera-joins-chrome-an...ing-7000011272/
!*!
20.05.2013, 12:12:51
Cytat
Jaką masz wersje przeglądarek i systemu operacyjnego ?

Najnowsze. Linux.

Cytat
Ech... http://www.zdnet.com/opera-joins-chrome-an...ing-7000011272/

Uaaa jak ja lubię te nic nie wnoszące arty w necie od "expertów".

Nie ma żadnej wersji publicznej opery na pc z webkit.
arrtxp
20.05.2013, 12:16:22
To już masz odpowiedź, na linux widocznie przeglądarki są dopracowane.
Na windows mamy o to taki bug, dalsza dyskusją z tobą nie mam sensu.
!*!
20.05.2013, 12:18:21
khtml? Co Ty za bzdury piszesz.
arrtxp
20.05.2013, 12:22:33
Nic, nic... nie piszę, jak byś odświeżył posta to byś zobaczył, że ta bzdura została skasowana ;p
r4xz
20.05.2013, 12:32:05
@arrtxp: powodzenia jak chcesz dawać użytkownikom do czytania czcionkę 8px i to jeszcze wytłuszczoną... równie dobrze mogę dać 4px i napisać że już w ogóle dziwnie jest wyświetlana i coś tutaj nie działa...
arrtxp
20.05.2013, 12:40:13
Mogę dać czcionkę o wielkości 100px ale błąd będzie nadal...
!*!
20.05.2013, 12:42:39
@r4xz - tu nie chodzi o jej wielkość, tylko o kwestie jej wyświetlenia przez przeglądarkę która korzysta z ustawień systemu, w tym wypadku windows. I albo zmieni się to w jej ustawieniach, albo skoryguje w css.
Takich przypadków jest sporo, wystarczy porównać zrzuty google na różnych systemach.
r4xz
20.05.2013, 13:26:55
Cytat(arrtxp @ 20.05.2013, 13:40:13 ) *
Mogę dać czcionkę o wielkości 100px ale błąd będzie nadal...

dziwne przy 8px bold faktycznie jest ten problem, ale zanim napisałem poprzedniego posta to sprawdziłem - przy 10px już jest poprawnie u mnie (Windows)
arrtxp
20.05.2013, 13:51:07
Masz racje... przy 10, 11 jest idetycznie... wszystko psuję się przy innych rozmiarach...
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.