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

Question

Несколько дней назад я обновил свой сайт. Разработка этого скина была в основном сделана с использованием сафари, и, как и ожидалось, все хорошо отрисовывается с использованием Firefox и Opera. Мне пришлось сделать несколько небольших изменений для IE7, но ничего особенного, кроме одной проблемы ...

Индикаторы даты для поста обрезаны в IE. Эта проблема возникает только для вложенных тегов span внутри левого плавающего элемента div. Я думаю, что мне нужны плавающие элементы div для размещения текста на левой и правой сторонах экрана.

Кто-нибудь из вас знает, как остановить IE7 от обрезки моего текста?

Редактировать: Я как бы разочаровался в этой проблеме. Мои сценарии теперь проверяют IE7 и подают в него несколько упрощенный HTML, который может обрабатывать его ограниченный движок. Он работает в IE8, так что пока только специальный случай для IE7 должен будет сделать ...

Answer 1

В большинстве случаев, когда IE6 или 7 отсекают нижнюю часть текста, просто добавьте:

line-height: normal;

к соответствующим правилам CSS. Должно это исправить, но, как вы поймете, это тоже расширяет поле.

Answer 2

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

Мой оригинальный CSS, который обрезал последнюю строку в IE7, но отлично смотрелся в других браузерах:

h2 {
   font-size: 22px;
   line-height: 1em;
}

См. Изображение проблемы здесь: https://skitch.com/pablohart/f4g3i/windows-7-x64

Исправление, которое я сделал, включало в себя просто добавление отступа внизу и затем возврат этого отступа с отрицательным полем. Как это:

h2 {
   font-size: 22px;
   line-height: 1em;
   padding-bottom: 5px;
   margin-bottom: -5px;
}

См. Изображение исправления на этом изображении: https://skitch.com/pablohart/f4g4h/windows-7-x64

Проблема с line-height: normal; заключается в том, что он принимает высоту строки по умолчанию для шрифта, обычно 1,3em.

Answer 3

У меня была похожая проблема. Я изменил свой промежуток до div, и проблема была решена. Я думаю, что IE7 может иметь проблему с обработкой высоты строки на промежутке. Не подтвердили, что это будет проблемой. Были и другие элементы CSS. (Работа над чужим кодом.) Но переход от span к div (block) решил проблему.

Answer 4

Попробуйте добавить переполнение: видимый; в ваш класс .postdate. Может быть, это поможет.

Answer 5

Я думаю, что проблема с прокладкой. Я попытался удалить стиль "padding: 3px", и он работал правильно. Раньше это ничего не показывало. Ответ Пола Харта показал мне это.
Возможно также поможет удаление / переопределение свойств полей.

Answer 6

Попробуйте добавить

div.postmeta { height: 100px; }
div.postdate { height: 75px; }

Произвольное значение высоты ... но вы бы точно знали, какую высоту вы хотите. Это должно препятствовать обрезке текстовых контейнеров в IE7.

Answer 7

По моему опыту, это неизменно нижняя часть текста, которая обрезается, и это тоже в основном из-за перекрывающихся делений. Если вы в состоянии убедиться, что div не перекрываются, тогда проблема действительно решена. Кроме того, добавление переполнения: visible иногда помогает.

Answer 8

Несмотря на то, что я не смог проверить его на моем текущем компьютере: я подозреваю, что это ошибка hasLayout . Методы борьбы с ним перечислены в разделе « properties » этой ссылки.

Answer 9

Добавление определенной высоты в .title исправляет это для меня (в IE6):

.title {
    PADDING: 0 10px 0 0; MARGIN-top: 0.3em; FLOAT: right; height: 1em;

Answer 10

для класса .bigdate, попробуйте заменить margin на padding; мне кажется, что это как-то связано с обработкой полей в IE.