Почему мой текст обрезается в IE7? - PullRequest
8 голосов
/ 31 марта 2009

Текст на моей веб-странице выглядит хорошо в Firefox и Safari, но в IE7 некоторые части обрезаются. Это выглядит как (но это не так), оно помещено в меньший элемент с overflow: hidden;.

Кто-нибудь знает, как это исправить?

Ответы [ 3 ]

32 голосов
/ 31 марта 2009

Необходимо указать высоту строки, соответствующую размеру шрифта ...

CSS

h1 {
   font-size: 2em;
   line-height: 2em; /* or 100% */
}

См. Также IE7 обрезает мой текст. Как мне отрегулировать свое отношение?

0 голосов
/ 08 мая 2013

У меня была та же проблема с IE9, и я потратил много времени на возни с атрибутами «высота», «высота строки» и «отступ». Вот что я придумал:

(a) «высота» не влияет на то, что происходит внутри текстового поля;

(b) «высота строки» влияет на отображение текста и приводит к его увеличению или уменьшению в текстовом поле, но число важно. В конце первый ответ кажется правильным, т. Е. Установите «line-height» на то же число, что и размер шрифта;

(c) «padding» также влияет на отображение текста, поскольку создает пространство между границами текстового поля и самого текста;

(d) «вертикальное выравнивание» - это точка отсчета для текста внутри текстового поля.

Итак, в качестве примера, я получил текст для отображения в средней строке текстового поля на моем сайте (без обрезки) и на хорошем расстоянии от границ текстового поля, используя следующий CSS в отношении " input = text "область моей таблицы стилей CSS:

   line-height: 14px; padding: 6px 2px 6px 2px; vertical-align: middle;

14px был размером шрифта, использованного в моем шаблоне (указан в другом месте таблицы стилей CSS), 6px - это верхний и нижний отступы соответственно, а 2px - это левый и правый отступы соответственно. Атрибут вертикального выравнивания помещает условную среднюю линию в тексте. Очевидно, что вы можете изменить любой из этих номеров в соответствии с вашими требованиями.

Кстати, для новичков используйте плагин firefox «firebug», чтобы найти код в вашем файле CSS-таблицы, который нужно изменить. Просто выделите текстовое поле, о котором идет речь, и справа оно даст названию таблицы стилей CSS его местоположение и номер строки, в которой появится код. Вы даже можете использовать «firebug» для запуска теста в реальном времени, который покажет вам эффект изменений, но который не будет сохранен при закрытии браузера:)

Надеюсь, это поможет.

0 голосов
/ 31 марта 2009

Попробуйте изменить атрибут переполнения для элемента, в котором находится текст.

Overflow: auto;

или

Overflow: Visible;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...