After researching countless issues related to sprites and IE8 online, I have encountered a common problem where sprites do not show up at all. However, in my case, the sprite is displayed but showing the incorrect piece of it. Surprisingly, it functions perfectly on all other web browsers.
Here is the 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;
}
And here is the 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>
Essentially, when clicking the search button, a hidden search bar should appear. This feature works flawlessly on other browsers except for IE8 which displays the incorrect part of the sprite.