Обрезаны несколько нижних пикселей текста

#html #css

#HTML #css

Вопрос:

Я действительно не могу понять, что происходит в этом случае. В многострочных фрагментах текста обрезаются несколько нижних пикселей.

Комментарии:

1. Для меня Firefox выглядит нормально. В каком браузере вы видите эту проблему?

2. Хорошо смотрится и в Chrome. Возможно, поможет экранная крышка?

3. i51.tinypic.com/n6faqg.png Буквы, подобные g и y, с нижней частью, которая простирается за определенную точку.

4. Кстати, только на второй строке. Первая строка в порядке.

5. Пожалуйста, не размещайте прямую ссылку на свой код, иначе ваш вопрос устареет, пока вы это исправляете. Вместо этого попробуйте воспроизвести проблему с помощью сокращенного кода в скрипке или около того, а также разместите код здесь, чтобы сделать ваш вопрос «автономным»

Ответ №1:

Настройка

 line-height: normal;
  

Сработало для меня.

Комментарии:

1. @Reece Вы должны принять этот ответ, чтобы он стал более наглядным. Это решило мою проблему

Ответ №2:

Самое быстрое исправление выглядит следующим образом:

Измените font-size здесь с 14px на 13px

 #slidertext h3 {
font-size: 13px;
// other styles
}
  

Работает для меня в Chrome.

Комментарии:

1. Используя это. Текст по-прежнему выглядит красиво и не имеет никаких сложностей. Также позволяет выполнять более длительные отправки без дополнительных осложнений в будущем. Спасибо.

2. на самом деле это не устраняет проблему, которая связана с высотой строки. Как указано ниже, настройка line-height: normal; — это исправление

Ответ №3:

Изменение font-size и font-family — это просто обходной путь. У меня была такая же проблема. Он хорошо работает в Firefox, но не в Chrome. Установите флажок padding или margin в поле ввода. Это было padding в моем случае. Я изменил padding:6px на padding:0px 6px; в моем случае.

Ответ №4:

На #slidertext li , который вы overflow: hidden; установили. Вам либо нужно отрегулировать высоту li, у вас есть встроенные стили, устанавливающие его height: 32px , отключить переполнение, либо настроить размер шрифта внутри него.

Ответ №5:

Попробуйте применить line-height к абзацу, чтобы он соответствовал тому, что font-size вы пытаетесь установить. В моем случае font-size было 14 пикселей, поэтому я установил line-height значение 15 пикселей.

Ответ №6:

В соответствии с конкретными браузерами такого рода проблемы очень часто связаны с семейством шрифтов. Мое решение для обрезки текста — изменить семейство шрифтов на sans-serif и посмотреть, имеет ли это какой-либо эффект. Это безошибочно работало в любом браузере, в котором я его пробовал.

Как и в других приведенных выше потоках… иногда это может помочь отрегулировать высоту строки и отступы, но для меня ни один из них не работал в целом:

 max-width: 100%;
min-height: 1.62em;
padding: 2px 5px 2px 5px;    
vertical-align: initial;
  

font-family: initial, sans-serif, serif; это хорошая отправная точка, а затем вы можете найти шрифт, который хорошо сочетается с вашей темой / сайтом.

Ответ №7:

Это исправление мое:

 letter-spacing: normal;
  

Ответ №8:

Для меня это было font-kerning . Его значение по умолчанию — auto это означает, что он использует информацию о кернинге, хранящуюся в шрифте. Я изменил его на нормальный, и это устранило проблему.

 input {
  font-kerning: normal;
}
  

Ответ №9:

В большинстве случаев, если шрифт обрезается снизу, это означает, что мы используем, пожалуйста, попробуйте ниже, если это поможет overflow:hidden;

Для устранения этой проблемы, пожалуйста, используйте,

 overflow-x:hidden;
line-height: according to your style-guide (1/1.5//normal);
  

// Вы можете увеличивать и уменьшать строку в зависимости от вашего стиля-руководство)

.

Ответ №10:

Проверьте размер sliderwrap, атрибут height может конфликтовать с общим размером текста, и поскольку ваше переполнение скрыто, согласно вашему свойству css, это может быть вашей проблемой.

Возможно, исправить это следующим образом:

 #sliderwrap
{
    height:114;
}