Css IE7上使用精灵、内联块和文本缩进样式的按钮标记存在问题-9999px_Css

Css IE7上使用精灵、内联块和文本缩进样式的按钮标记存在问题-9999px

css

Css IE7上使用精灵、内联块和文本缩进样式的按钮标记存在问题-9999px,css,Css,我有这样的按钮： <button type="button" class="img img_button_bla" onclick="...">Bla!</button> img_button_bla类只需设置宽度、高度和背景位置我想做的是设计按钮的样式，使之成为Bla！不显示在按钮上。我尝试了文本缩进：-9999px；这主要起作用，但在IE7中不起作用。出于某种原因，在IE7中，只有一些以这种方式设计的按钮根本不显示，但按钮占用的空间是空白的我也尝试过设置线条高度

我有这样的按钮：

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

img_button_bla类只需设置宽度、高度和背景位置

我想做的是设计按钮的样式，使之成为Bla！不显示在按钮上。我尝试了文本缩进：-9999px；这主要起作用，但在IE7中不起作用。出于某种原因，在IE7中，只有一些以这种方式设计的按钮根本不显示，但按钮占用的空间是空白的

我也尝试过设置线条高度：0；字体大小：0，除了显示的一条小黑线外，几乎可以正常工作

我还尝试将其更改为block:display，这修复了IE7中的问题，但由于需要是内联块，因此会弄乱布局

我试着四处搜索，但在使用按钮标签、内联块显示和精灵图像的地方找不到任何答案

有人知道我能做些什么来让它工作吗？我不想删除按钮标签中的文本，因为以前没有问题，因为出于可访问性的原因，按钮是空的，所以按钮仍然会显示在移动版的网站上，基本上没有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>

仅供参考，您可以使用style input type=submit，而不必依赖buggy button元素，这是不推荐的，因为在某些情况下，它传递错误的信息

我有一个片段@，你可以根据它来判断

<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，文本缩进用于现代浏览器。您可能需要为IE指定文本缩进0，因为它不应用文本缩进偏移。

button元素如何传递错误信息？而且，大多数情况下，该按钮只调用javascript函数。已尝试但不起作用。请参阅我发布的示例。如果删除内容div，效果很好，但不在内部。@meder我尝试了线条高度，但仍然无法解决问题。只要文本缩进行存在，它们就不会在IE中显示任何按钮。仅使用行高确实可以在IE中工作，但我尝试设置样式的链接最终非常长。您是否尝试仅为IE指定0的文本缩进？@meder如何仅为IE将文本缩进设置为0？此外，我刚刚注意到linkI需要为该站点添加书签，但您将其更改为块显示而不是内联块。这对我的网站不起作用。

<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>