CSS3 - problem z wyrównaniem czcionki - Grupy dyskusyjne w eGospodarka.pl

eGospodarka.pl › Grupy › pl.comp.www › CSS3 - problem z wyrównaniem czcionki

« poprzedni wątek

następny wątek »

Ilość wypowiedzi w tym wątku: 13

1. Data: 2012-12-05 11:04:33
Temat: CSS3 - problem z wyrównaniem czcionki
Od: Marek <p...@s...com>

Witam,

Zaobserwowałem dziwną rzecz. Mamy sobie czcionkę Trajan Pro 16px.
Umieszczamy ją w table-cell o wysokości 40px. Okazuje się, że pod IE10
duże litery tej czcionki wychodzą ponad obrys bloku a pod FF są na równi
górnej krawędzi bloku. Przekłada się to również na centrowanie w pionie:
pod FF vertical-align:middle ładnie centruje czcionkę, a pod IE jest
przesunięta do góry parę pikseli. Styl line-height: 100% niczego nie
zmienia. Czy wiecie o co chodzi?

[ pokaż wiadomość z nagłówkami ]

do góry
2. Data: 2012-12-05 11:32:46
Temat: Re: CSS3 - problem z wyrównaniem czcionki
Od: TOUDIdel <t...@o...pl>

W dniu 05.12.2012 11:04, Marek pisze:
> Czy wiecie o co chodzi?

Nie wiemy. Dlatego wskazany jakiś chociaż kawałek kodu.

--
td

[ pokaż wiadomość z nagłówkami ]

do góry
3. Data: 2012-12-05 12:33:08
Temat: Re: CSS3 - problem z wyrównaniem czcionki
Od: Marek <p...@s...com>

W dniu 2012-12-05 11:32, TOUDIdel pisze:
> W dniu 05.12.2012 11:04, Marek pisze:
>> Czy wiecie o co chodzi?
>
> Nie wiemy. Dlatego wskazany jakiś chociaż kawałek kodu.
>

Proszę bardzo:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
font-family: "Trajan Pro";
font-size:50px;
padding: 0;
line-height: 100%;
}
div {
background-color: #0F0;
margin-top: 100px;
}
</style>
</head>

<body style="font-size: 24px;">
<div>ZZZ XXX Aslldas Jdoi Poiasdp oiasuj da</div>
</body>
</html>

Na IE górna część liter wychodzi ponad zielone tło.

[ pokaż wiadomość z nagłówkami ]

do góry
4. Data: 2012-12-05 13:49:43
Temat: Re: CSS3 - problem z wyrównaniem czcionki
Od: TOUDIdel <t...@o...pl>

W dniu 05.12.2012 12:33, Marek pisze:
> Proszę bardzo:
>
> <!doctype html>
> <html>
> <head>
> <meta charset="utf-8">
> <style>
> body {
> font-family: "Trajan Pro";
> font-size:50px;
> padding: 0;
> line-height: 100%;
> }
> div {
> background-color: #0F0;
> margin-top: 100px;
> }
> </style>
> </head>
>
> <body style="font-size: 24px;">
> <div>ZZZ XXX Aslldas Jdoi Poiasdp oiasuj da</div>
> </body>
> </html>

W tym kodzie nie ma table-cell o wysokości 40px, ale i tak wygląda
(przynajmniej u mnie w przeglądarce) poprawnie.

Nie mam w systemie ani takiej czcionki, ani Internet Explorera, więc tej
konkretnej konfiguracji nie sprawdzę.

Pewnie nie to jest problemem, ale olewałbym doctype'a tylko poprawnie go
ustawił i w ramach ćwiczeń do div-a dodałbym float: left.

--
td

[ pokaż wiadomość z nagłówkami ]

do góry
5. Data: 2012-12-05 16:05:00
Temat: Re: CSS3 - problem z wyrównaniem czcionki
Od: Marek <p...@s...com>

W dniu 2012-12-05 13:49, TOUDIdel pisze:
>
> W tym kodzie nie ma table-cell o wysokości 40px, ale i tak wygląda
> (przynajmniej u mnie w przeglądarce) poprawnie.

Początkowo sądziłem, że table-cell jest potrzebny. Teraz uprościłem
przykład. Ale nie jest. Ten DIV może być typu table-cell. Niewiele to
zmienia. :-(

> Nie mam w systemie ani takiej czcionki, ani Internet Explorera, więc tej
> konkretnej konfiguracji nie sprawdzę.
>
> Pewnie nie to jest problemem, ale olewałbym doctype'a tylko poprawnie go
> ustawił i w ramach ćwiczeń do div-a dodałbym float: left.

Właśnie żeby nie komplikować to dałem maksymalnie prosty kod CSS/HTML, w
którym już to widać. Odpada wtedy rozważanie czy tabela, czy floaty są
za to odpowiedzialne.

Tak to wygląda u mnie:
http://img204.imageshack.us/img204/6527/80664984.png

[ pokaż wiadomość z nagłówkami ]

do góry
6. Data: 2012-12-05 16:39:15
Temat: Re: CSS3 - problem z wyrównaniem czcionki
Od: TOUDIdel <t...@o...pl>

W dniu 05.12.2012 16:05, Marek pisze:
> Właśnie żeby nie komplikować to dałem maksymalnie prosty kod CSS/HTML, w
> którym już to widać. Odpada wtedy rozważanie czy tabela, czy floaty są
> za to odpowiedzialne.

Spox. Znając humory IE, ustaw dobry doctype oraz sprawdź, czy Twoje IE10
na pewno jest uruchomione w trybie IE10 (bo może jest w trybie którejś z
wcześniejszych wersji) oraz czy nie jest włączony tryb zgodności - jeśli
tak to wyłącz (menu Strona -> Ustawienia widoku zgodności lub w
rejestrze HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet
Explorer\BrowserEmulation).
--
td

[ pokaż wiadomość z nagłówkami ]

do góry
7. Data: 2012-12-05 16:56:18
Temat: Re: CSS3 - problem z wyrównaniem czcionki
Od: NotBear <p...@i...pl>

W dniu 2012-12-05 16:05, Marek pisze:
> Tak to wygląda u mnie:
> http://img204.imageshack.us/img204/6527/80664984.png

W FF masz podobnie - tyle, ze gorne krawedzie sa przyciete. "Wina"
kroju, ze ma glify tak wyraznie wypuszczone poza linie pisma.

Ustaw line-height z odpowiednim naddatkiem, np 1.2 lub konkretna w px.
Wartosc line-height:100% Ci nie pomogla, bo odnosi sie do biezacego
font-size, a nie wysokosci kontenera.

--
NotBear

[ pokaż wiadomość z nagłówkami ]

do góry
8. Data: 2012-12-05 17:15:58
Temat: Re: CSS3 - problem z wyrównaniem czcionki
Od: Marek <p...@s...com>

W dniu 2012-12-05 16:39, TOUDIdel pisze:

> Spox. Znając humory IE, ustaw dobry doctype oraz sprawdź,

A czy coś z nim jest nie tak? Wydaje mi się poprawny.

> czy Twoje IE10
> na pewno jest uruchomione w trybie IE10 (bo może jest w trybie którejś z
> wcześniejszych wersji)

A co to takiego? :-) Można go uruchomić w trybie IE9,8,7 ? Nie
wiedziałem, że tak mozna a to by mi się bardzo przydało. Jak się przełączać?

> oraz czy nie jest włączony tryb zgodności - jeśli
> tak to wyłącz (menu Strona -> Ustawienia widoku zgodności lub w
> rejestrze HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet
> Explorer\BrowserEmulation).

Tryb zgodności jest wyłączony. A tak na marginesie, to nie mam menu
"strona". Znalazłem tą opcję w narzędziach.

[ pokaż wiadomość z nagłówkami ]

do góry
9. Data: 2012-12-05 17:39:32
Temat: Re: CSS3 - problem z wyrównaniem czcionki
Od: NotBear <p...@i...pl>

W dniu 2012-12-05 17:15, Marek pisze:
> A co to takiego? :-) Można go uruchomić w trybie IE9,8,7 ? Nie
> wiedziałem, że tak mozna a to by mi się bardzo przydało. Jak się
> przełączać?

Developer Tools
Mozna
F12

http://msdn.microsoft.com/en-us/library/hh968260%28v
=vs.85%29.aspx#browserModeMenu

--
NotBear

[ pokaż wiadomość z nagłówkami ]

do góry
10. Data: 2012-12-06 07:33:40
Temat: Re: CSS3 - problem z wyrównaniem czcionki
Od: TOUDIdel <t...@o...pl>

W dniu 05.12.2012 17:15, Marek pisze:
>> Spox. Znając humory IE, ustaw dobry doctype oraz sprawdź,
>
> A czy coś z nim jest nie tak? Wydaje mi się poprawny.

Właściwe znajdziesz tu:
http://www.w3.org/QA/2002/04/valid-dtd-list.html

oraz ew. tu:
http://en.wikipedia.org/wiki/Document_Type_Declarati
on
http://www.htmlhelp.com/tools/validator/doctype.html
http://www.w3schools.com/tags/tag_doctype.asp
http://www.poradnik-webmastera.com/polecenia/html/zn
aczniki/znacznik_doctype.html

>> czy Twoje IE10
>> na pewno jest uruchomione w trybie IE10 (bo może jest w trybie którejś z
>> wcześniejszych wersji)
>
> A co to takiego? :-) Można go uruchomić w trybie IE9,8,7 ? Nie
> wiedziałem, że tak mozna a to by mi się bardzo przydało. Jak się
> przełączać?

Narzędzia deweloperskie (bodajże pod F12)

>> oraz czy nie jest włączony tryb zgodności - jeśli
>> tak to wyłącz (menu Strona -> Ustawienia widoku zgodności lub w
>> rejestrze HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet
>> Explorer\BrowserEmulation).
>
> Tryb zgodności jest wyłączony. A tak na marginesie, to nie mam menu
> "strona". Znalazłem tą opcję w narzędziach.

Możliwe. "Strona" to chyba w IE8 albo 9 było.

--
td

[ pokaż wiadomość z nagłówkami ]

do góry