Текстовый отступ не работает в ie7 - PullRequest
Новая
       40

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

25 голосов
/ 22 мая 2010

Я работаю над веб-сайтом, и на верхней панели навигации есть окно поиска. Я применил следующую CSS к кнопке отправки поиска 

#submit {
   background: url("img/new-search-icon.png") no-repeat scroll -1px 0 #FFFFFF;
   border:0 none;
   cursor:pointer;
   display:block;
   height:21px;
   padding:0;
   position:absolute;
   right:0;
   text-indent:-9999px;
   top:0;
   width:20px;
   z-index:2;
}

Моя проблема в IE7: отступ в тексте отсутствуетработа, пожалуйста, помогите мне, если вы хотите увидеть демо, вы можете просмотреть его, нажав здесь Нажмите здесь .Пожалуйста, помогите мне.

Ответы [ 14 ]

69 голосов
/ 05 июня 2010

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

text-transform: capitalize;

Сумасшедший, но верный.

20 голосов
/ 30 мая 2011

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

CSS декларация: 

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


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

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

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

высота строки: 0 Еще одно исправление для IE6.

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

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

2 голосов
/ 29 мая 2010

<pre>.submit { <strong>line-height: 0px; font-size: 0px;</strong> /* restante do teu código */ } </pre></p> <p> este um instancelo simse

1 голос
/ 07 апреля 2013

text-transform: использовать заглавные буквы; на самом деле не имел никакого эффекта (это происходило с тегами), но это сработало 

text-indent: -9999px
float: left
display: block
font-size: 0
line-height: 0
overflow: hidden
1 голос
/ 04 мая 2012

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

1 голос
/ 26 апреля 2012

Только следующие сделают работу за вас:) 

   text-indent:-9999px !important;  
   line-height:0;
1 голос
/ 05 января 2012

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

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

Поэтому обычные браузеры используют отрицательный отступ текста, т.е. 7 получает специальную обработку, используя условные комментарии

0 голосов
/ 01 марта 2013

Вот некоторый 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;
}
0 голосов
/ 24 сентября 2012

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

0 голосов
/ 05 июля 2012

Не используйте 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.

Страница:
...