Здравейте на всички!
Упражнеявам се, правейки една HTML страница, като използвам комбинирано и английски език и кирилица в нея.
Появи се разминаване на пиксели, което не мога да разбера поради каква причина става.
Самото разминаване става при дължината на <li> таговете, които са в <ul>.
При Mozilla Firefox дължината на някои от <li> таговете е по-малка от колкото при Google Chrome.
Ще ви дам примерен код в който присъства само кирилица, за да ако някой би пожелал да погледен, да го улесня повече в разбирането на това за което пиша. Сложил съм reset.css в HTML страницата, за да нулира някои от елементите, като padding, margin на елементите.
<!DOCTYPE html>
<link rel="stylesheet" href="reset.css" /> body > ul {
list-style-type: none;
display: inline-block;
}
body > ul > li {
float: left;
border: 1px solid red;
}
<li>Това е първи елемент
</li> <li>Това е втори елемент
</li> <li>Това е трети елемент
</li> <li>Това е четвърти елемент
</li> <li>Това е пети елемент
</li>
В този примерен код, крайният размер на <ul>:
- в Mozilla Firefox е
745 x 18- в Google Chrome е
752.969 x 18В Mozilla Firefox дължината на <ul> е с 7.969 пиксела (px) по-малка от тази в Google Chrome.
Ако изпълните този код, по-конкретно можете да забележите, че дължините на 5-те <li> тагове в Mozilla Firefox и в Google Chrome са следните:
Mozilla Firefox | Google Chrome
<li>
149 x 18 <li>
149.453 x 18
<li>
146 x 18 <li>
147.609 x 18
<li>
145 x 18 <li>
146.156 x 18
<li>
169 x 18 <li>
170.031 x 18
<li>
139 x 18 <li>
139.719 x 18
Личи си разликата в дължината на всеки един от <li> елементите. Личи се, че в Google Chrome всички <li>-та са по-дълги от тези в Mozilla Firefox.
Доколкото знам, писането на CSS в HTML файла е лоша практика. Тук съм написал CSS-а в HTML файла единствено само заради примера.
