Css with IE8 padding will disappear after returning back to the page

Question

I can't figure out why on IE8 the text (links) "Test1,test2,..." when pressed will be moved to the left when returned back to the page. Looks like the padding will disappear. Also the font will be changed a little.

It works fine on IE10 but not on IE8 what am i missing?

Link to example

Thank you already

<div class="navigation" id="test">
<div class="img-wrap"><img alt="" src="http://lorempixel.com/206/115/" /></div>
<h3>Testing</h3>
<ul class="side-bar">
    <li class="block"><a href="#">test1</a></li>
    <li class="block"><a href="#">test2</a></li>
    <li class="block"><a href="#">test3</a></li>
    <li class="footer"><a href="#">test4</a></li>
</ul>
</div>




#test * {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

#test {
  width:206px;
  margin:0px;
}

#test .img-wrap {
  border-radius:10px 10px 0 0;
  overflow:hidden;
}

#test img {
  display:block;
}

#test h3 {
  background-color:#F6F7F7; 
  color:#4A9DDA;
  padding:16px;
  border-left:1px solid #C9CDD1;
  border-right:1px solid #C9CDD1;
  border-bottom:1px solid #C9CDD1;
}

#test ul {
  list-style:none;  
  border-left:1px solid #C9CDD1;
  border-right:1px solid #C9CDD1;
}

#test ul.block, #test li.block {
  padding:0;
  background-image: url("7x10-pijl.gif");
   background-position: 190px 12px;
   background-repeat: no-repeat;
}

#test li.block a {
    color: #333333;
    font-size: 13px;
    display:block;
    text-decoration: none;
}


/* Footer */

#test li.footer {
  font-size: 11px;
    font-weight: bold;
  padding: 15px 0 17px:

}

#test li.footer a {
    margin-left: auto;
    color: #4A9DDA;
}

#test li.footer a:hover
        {
            text-decoration: underline;
        }


/* base styling */

#test li {
  border-bottom:1px solid #C9CDD1;
  position:relative;
   background-color:#F6F7F7; 

}


#test li.block a:hover
        {
            color:White;
            background-color:#219FD1;
background-image: url("arrowBig.png");
background-position: 190px 12px;
   background-repeat: no-repeat;
        }

 #test a:link
        {
            text-decoration:none;
            display:block;
            padding: 4px 12px;
        }

 #test a:hover
        {
            color:White;
        }

Answer 1

If you want the same style for visited and normal links use #test a instead of #test a:link. Using just a will add the styles for all states for the link(unless specified elsewhere example: a:hover, a:visited)

In you're case you don't have a style for the :visited state and since you only have an a:link style rule it has nothing to fallback on.