Размер текста на разных платформах разный - PullRequest
Новая
       45

Размер текста на разных платформах разный

0 голосов
/ 23 марта 2011

Как получить точный размер на разных платформах, если каждая платформа отображает текст разного размера?Эта проблема обострилась с недавним выпуском Firefox 4 .Эта версия включает аппаратную визуализацию текста с использованием DirectWrite .Размер текста, написанного с помощью DirectWrite, намного выше, чем текст, написанный без аппаратного ускорения.Обратите внимание на следующий пример.Вот живой пример , если вам нужно увидеть CSS.

directwrite off

  • 64-битная Windows 7 Home
  • ATI RadeonHD 4670
  • DirectWrite выключен , поскольку мои драйверы не обновляются.
  • 620 x 283

directwrite on

  • 64-разрядная версия Windows Vista Business
  • nVidia GeForce 8800GT
  • DirectWrite - на , поскольку я только что обновил свои драйверы.
  • 620 x 293

HTML 

<ul>
 <li><a>Nav</a></li>
 <li><a>Nav</a></li>
 <li><a>Nav</a></li>
</ul>
<div>
 Content
</div>

CSS 

ul {
 float: left;
 width: 10em;
}

div {
 margin: 0 0 0 12.7em;
 min-height: 26.1em;
}

Видите ли вы, как навигация совпадает с контентом, когда DirectWrite выключен, но навигация вышечем содержание, когда DirectWrite включен?Я знаю, что есть некоторые хакерские решения.Один - указать все (font-size, width, height) в пикселях.Это не идеально, потому что компонент не будет модульным, то есть его нельзя будет повторно использовать в другом параметре, масштабированном до другого размера.Это также нарушает настройки размера шрифта в IE6.Другое решение состоит в том, чтобы использовать JavaScript, чтобы прочитать физическую высоту навигации и сделать содержимое такой же высоты.Это не идеально, потому что это роль CSS для стиля.Есть ли какое-нибудь решение для CSS?

Это только один из многих примеров.Другой - это Firefox 3 в Ubuntu 9, текст которого гораздо шире, поэтому не все ссылки подходят для моей основной навигации.Я был вынужден отрубить последнюю навигационную ссылку с помощью max-width: 37em; overflow: hidden.

Ответы [ 2 ]

1 голос
/ 23 марта 2011

Мой честный ответ: вам приходится иметь дело с шрифтами разных размеров. Лучше всего не выравнивать контент-высоту, используя min-height: 26.1em, так как он "хакерский". Я бы предложил реструктурировать ваш HTML, чтобы UL находился внутри DIV, а нижняя строка всегда совпадала.

Если не считать этого, вы можете установить ul li { line-height: 1em } или подобное, что сделает LI всегда одинаковой высоты.

0 голосов
/ 24 марта 2011

Я бы не волновался об этом. По сути это разные сущности, и контент все равно не исправлен, как вы сказали, он будет расширяться, если вы нажмете «Расширенные настройки». Я думаю, что это выглядит хорошо, если немного перешагнуть, как будто это позволяет вам знать, что это не фиксированная граница.
Вот идея. Если вы хотите сохранить его фиксированным, вы можете обернуть все это внутри контейнера DIV и использовать его для определения его границ. Затем используйте прокрутку переполнения с содержимым, когда оно выходит за пределы контейнера DIV. Пока его вертикаль, это не должно быть слишком много беспокоить

...