html - IE8 显示错误的 CSS Sprite

Question

我在网上读到关于 sprite 和 IE8 的一百万个问题，但是，它们似乎都解决了 sprite 根本不显示的问题。我的出现了，它只是显示了错误的 Sprite 。它在所有其他浏览器中工作正常。

这是CSS

div.searchForm input[type=text] {
border: 0;
padding: 0 10px;
margin: 0;
background: url(../img/sprite.png) 0 -125px no-repeat;
background-size: 115% 235px;
width: 600px;
height: 30px;
float: left;
font-size: 12px;
color: #fff;
-webkit-appearance: none;
-webkit-border-radius: 0;
}

和 html:

    <section id="secondary6">
    <h1 class="hidden">Search</h1>
    <div class="clearfix">
        <div class="grid_4">
            <nav class="grid_2 secondary">
                <h1 class="hidden">Search Secondary Navigation</h1>
            </nav>
            <div class="searchForm">
                <input type="text" placeholder="search">
                <input type="button">
                <input type="submit" class="hidden" >
            </div>
        </div>
    </div>
</section>

基本上您单击搜索按钮，它会显示一个搜索栏，否则应该将其隐藏。正如我所说，它适用于其他浏览器。

Answer 1

IE8 不支持背景大小(参见 https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Browser_compatibility )，因此您必须解决这个问题。根据您的需要，您可以尝试使用 IE7.js(它可以与其他版本的 IE 一起使用)或条件注释来调整 IE8 的图像位置。或者，只要确保您的原始图像不需要重新调整大小即可。