#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;
}