Текстовый отступ не работает в ie7

Ответ 1

Добавьте этот CSS, чтобы заставить IE7 вести себя:

text-transform: capitalize;

Сумасшедшая, но истинная.

Ответ 2

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

Объявление css:

text-indent:-9999px;
text-transform:capitalize;


font-size:0;
display:block;
line-height:0;

font-size: 0 используется для уменьшения размера шрифта и хорошо работает в IE7. Но даже после добавления этой строки вы заметили бы черную линию (в основном текст) в центре кнопки в IE6.

display: block Отрицательный текстовый отступ работает в IE, только если он добавлен.

line-height: 0 Другое исправление для IE6.

text-transform: capitalize Я не знаю точной причины включения свойства, как-то он исправляет проблему.

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

Ответ 3

.submit {
    line-height: 0px;
    font-size: 0px;
    /* restante do teu código */
    }

este é um example simse

Ответ 4

Если ничего не работает точно, это делает:

color: transparent;
text-indent: 0 !important; /* reset the old negative value */

Таким образом, обычные браузеры используют отрицательный текст-отступ, ie7 получает специальное обращение с использованием условных комментариев

Ответ 5

Имеет аналогичную проблему в IE8. После устранения всех других возможностей объявление строки-высоты в другом месте CSS нарушало текст-отступ. Решение: явно задайте высоту строки 0.

Ответ 6

text-transform: capize; на самом деле не повлиял на меня (это происходило по тегам), но это сработало

text-indent: -9999px
float: left
display: block
font-size: 0
line-height: 0
overflow: hidden

Ответ 7

Я не знаю, является ли это причиной вашей проблемы, но я думаю, что ваша короткая нотация background неверна; цветовой код должен быть в начале, а не в конце.

Ответ 8

Простите немного поздно, но искал решение проблемы IE7 с отрицательным текстовым отступом. Я начал пробовать свои собственные случайные пути и наткнулся на это. jUst хотел опубликовать его на Stack, если он может помочь другим.

Попытка добавить значок к ссылке и не показывать текст.

Мой CSS для всех браузеров

a.lnk_locked , a.lnk_notchecked, a.lnk_checked
{ background: url(../images/icons/icon_sprites.png) no-repeat; padding: 0 2px 0 0;   width:18px; height:18px; 
       vertical-align:middle; text-indent:-9009px; display:inline-block; overflow: hidden; zoom: 1; *display:inline;}
    a.lnk_locked    { background-position: -1px -217px; }

Мой CSS только для IE7

a.lnk_locked , a.lnk_notchecked, a.lnk_checked
{  text-indent:20px; padding-left:-20px; width:18px;}

Ответ 9

Я просто хотел добавить для "других" (хотя это не было строго связано с темой, а не с проблемой ops).

Пожалуйста, убедитесь, что вы используете "px" для своей ценности. то есть -9999px не -9999.

Я только что потратил 10 минут, чтобы отладить, почему это не сработало. Смотря на значение прямо передо мной.

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

Вы должны включить блок измерения.... или иначе он просто будет терпеть неудачу.

Ответ 10

Решение, которое я обнаружил в моих текстовых ошибках в IE7, и что-то, что я чувствую, должно быть добавлено в этот поток:

Не работает:

text-indent: -900009px;

Работает ли:

text-indent: -9999px;

Я не знал, что существует предел? Я предполагаю, что есть.

Ответ 11

Только следующее выполнит эту работу для вас:)

   text-indent:-9999px !important;  
   line-height:0;

Ответ 12

Не используйте text-indent. Попробуйте вместо этого:

display: block;
height: 0;
padding-top: 20px; //The height of your button
overflow: hidden;
background: url(image.png) no-repeat; // Image replacement

Работает во всех браузерах, включая IE6.

Ответ 13

Я пробовал все вышеперечисленное без успеха. Мне пришлось добавить float:left, прежде чем он подхватил текстовый отступ. IE7 сумасшедший, и, сумасшедший, я имею в виду ужасный.

Ответ 14

Вот некоторый CSS, который я использую, который работает для меня в IE и не полагается на text-indent

.sprite {
    width:100%;
    height:0px;
    padding-top:38px;
    overflow:hidden;
    background-repeat:no-repeat;
    position:relative;
    float:left;
    display:block;
    font-size:0px;
    line-height:0px;
}
.sprite.twitter {
    background-image:url(/images/social/twitter-sprite.png);
    margin-top:8px;
    background-position: 4px 0px;
}
#social-links a:hover .sprite.twitter {
    background-position: 4px -38px;
}