title: Horizontal gradient stripe using background-size not working in IE9
body: <p>I'm generating a bar of horizontal gradient as a background across my site that works perfectly in every browser except...IE9.</p>
  
  <p>The gradient itself is working, it is just that I want to limit the height of the blue bar. Check it out in Safari/Firefox/Chrome and then in IE9 and you can see that the blue gradient fills the entire element.</p>
  
  <p><a href="http://solaslite.wpengine.com" rel="nofollow">Horizontal gradient bar using CSS</a></p>
  
  <p>Here is my CSS:</p>
  
  <pre><code>#inner {
  background: #1e5799;
  background: -moz-linear-gradient(top,  #1e5799 0%, #0057be 35%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(35%,#0057be));
  background: -webkit-linear-gradient(top,  #1e5799 0%,#0057be 35%);
  background: -o-linear-gradient(top,  #1e5799 0%,#0057be 35%);
  background: -ms-linear-gradient(top,  #1e5799 0%,#0057be 35%);
  background: linear-gradient(to bottom,  #1e5799 0%,#0057be 35%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#0057be',GradientType=0 );
  background-size: 1px 10%;
  background-repeat: repeat-x;
  margin: 0 auto;
  padding: 1em 0;
  </code></pre>
  
  <p>}</p>