Проблемы с тегом кнопки в IE7 в стиле sprite, inline-block и text-indent -9999px - PullRequest
Новая
       1

Проблемы с тегом кнопки в IE7 в стиле sprite, inline-block и text-indent -9999px

1 голос
/ 12 августа 2010

У меня есть такие кнопки: 

<button type="button" class="img img_button_bla" onclick="...">Bla!</button>

Класс img: 

.img {
display:inline-block;
border:0 none; 
background-image:url(/i_common/master.png) !important; /*regular sprite image*/
background-image:url(/i_common/master.gif); /*sprite image for ie*/
}

Класс img_button_bla просто устанавливает ширину, высоту и положение фона.

Я пытаюсь стилизовать кнопку, чтобы Bla! не отображался на кнопке.Я попробовал text-indent:-9999px;, который в основном работал, но не в IE7.По какой-то причине в IE7 только НЕКОТОРЫЕ из кнопок, стилизованных таким образом, вообще не отображаются, но место, занимаемое кнопкой, просто пустое.

Я также попытался установить line-height:0;font-size:0, который почти работает, за исключением маленькой черной линии, которая показывает.

Я также попытался изменить ее на block:display, которая устраняет проблему в IE7, но затемпортит компоновку, так как должен быть встроенным блоком.

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

У кого-нибудь есть идеи, что я могу сделать, чтобы заставить это работать?Я не хочу удалять текст внутри тега кнопки (там, где раньше проблем не было, потому что они раньше были пустыми) по причинам доступности, и поэтому кнопки все равно будут отображаться в мобильной версии сайта (в основном это не CSS)).

Редактировать:

Мне удалось создать файл примера, показывающий проблему, хотя в примере он также не работает в IE8.Ниже работает в FF и Chrome 

<html>
    <head>
        <STYLE TYPE="text/css">
          #content {
              width: 980px;
              margin-left: auto;
              margin-right: auto;
              padding: .5em;
              background-color: #fff;
              text-size: 1.1em;
          }
          .left {
              float: left;
          }
          .right {
              float: right;
          }

          .img {
              display:inline-block;
              border:0 none; 
              background-color:red; /*using color instead of sprite image for easyer testing */
              text-indent:-9999px;
          }
          .img_button {
              width:50px;
              height:25px;
          }
        </STYLE>
    </head>
    <body>
        <div id="content">
            <div class="left">
                <button class="img img_button">Hi!</button>
            </div>
            <div class="right">
                <a href="" class="img img_button"> There</a>
            </div>
        </div>
    </body>
</html>

1 Ответ

0 голосов
/ 12 августа 2010

К вашему сведению, вы можете ввести input type=submit вместо того, чтобы полагаться на ошибочный элемент button, который НЕ рекомендуется, потому что в некоторых случаях он передает неверную информацию.

У меня есть фрагмент @ http://work.arounds.org/using-css-sprites-with-input-type-submit-buttons/, на котором вы можете основать его. 

<input type="submit" id="submit" value="Get rid of me please">

<style>
input#submit {
border:0;
background:url(sprite.gif) no-repeat 0 200px;
text-indent:-999em;
line-height:3000;
width:200px;
height:200px;
}
</style>

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...