代码之家 › 专栏 › 技术社区 › Echo says Reinstate Monica

带有sprite、inline块和文本缩进-9999px的IE7上的按钮标记有问题

css

Echo says Reinstate Monica · 技术社区 · 14 年前

我有这样的按钮:

<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中的问题,但由于需要一个内联块,因此会扰乱布局。

我试过四处搜索,但找不到任何答案,因为它使用了按钮标签、内联块的显示和sprite图像。

有人知道我能做些什么来让这个工作吗?我不想删除button标签中的文本(以前没有任何问题,因为它们以前是空的),因为它们具有可访问性,所以按钮仍然会显示在网站的移动版本中(基本上没有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 回复 | 直到 14 年前

meder omuraliev 14 年前

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