CSS i Przeglądarki Opcje

[-arrtxp-]

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 
<div style="border: solid 1px black; font-size: 8px; font-family: verdana; font-weight: bold;">
COŚ
</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...

Ten post edytował arrtxp 19.05.2013, 13:39:17

[lobopol]

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]

użyj jakiegoś css reseta

Ew. w większości wypadków wystarczy na początku CSS:

Kod

*{ margin: 0; padding: 0; }

[-arrtxp-]

Sory chłopaki... jak by reset pomógł to bym tego wątku nie zakładał...

[kamil4u]

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-]

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...

Ten post edytował arrtxp 19.05.2013, 19:41:02

[lobopol]

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-]

No... no ... no... ile razy mam pisać, że reset nie pomaga... to wada Chrome.

[lobopol]

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-]

Proponuje Ci utworzenie pliku html i sprawdzenie tego w praktyce a nie przez javascript.

[com]

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 (IMG:style_emoticons/default/wink.gif)

[Monter08]

Proponuje Ci utworzenie pliku html i sprawdzenie tego w praktyce a nie przez javascript.

Jakie javascript? (IMG:style_emoticons/default/tongue.gif)

[-arrtxp-]

@mon
a na czym oparta jest ta strona: http://jsfiddle.net/9S4pL/3/ (IMG:style_emoticons/default/facepalmxd.gif)

Może różnicy nie widzicie, ponieważ to tylko jeden pixel...
http://images.tinypic.pl/i/00387/oqecpz2m9542.png

[com]

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 (IMG:style_emoticons/default/biggrin.gif) poprostu firefox inaczej mierzy pixele...

[lobopol]

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]

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.

[!*!]

@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]

I dlatego do każdego projektu załączam normalize.css stąd: https://github.com/necolas/normalize.css/

[-arrtxp-]

[HTML] pobierz, plaintext 
<html>
<head>
<style>
* {
    margin: 0;
    padding: 0;
 
}
body {
    font-size: 8px;
    font-weight: bold;
    font-family: Verdana;
    line-height: 12px;
    color: #000;
}
div { 
    color: #ccc;
    padding: 3px; 
    background: #222;
    border: solid 1px black;
}
</style>
</head>
<body>
<div>COS</div> zamiast odstępu na górze 3px będzie 2px... a nad dolę 3px.
</body>
</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...

Ten post edytował arrtxp 20.05.2013, 11:20:48

[!*!]

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 na operze masz tak samo, bo opera od niedawna korzysta z tego samego silnika co chrome

Nie, nadal jest to presto.

Ten post edytował !*! 20.05.2013, 11:33:58