带IE8 padding的css返回页面后会消失答案

【问题标题】：Css with IE8 padding will disappear after returning back to the page带IE8 padding的css返回页面后会消失
【发布时间】：2013-12-12 23:49:21
【问题描述】：

我不明白为什么在 IE8 上，文本（链接）“Test1,test2,...”在按下时会在返回页面时向左移动。看起来填充将消失。字体也会稍作改动。

它在 IE10 上可以正常工作，但在 IE8 上不行我缺少什么？

Link to example

谢谢你

<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;
        }

【问题讨论】：

您是否在另一个样式表中定义了 a:visited ？也许这会影响样式
我这样做是在 custom.css 我也有一个 style.css a:visited { color: #999999;文字装饰：无；大纲：0； }
已修复：D 谢谢。添加：#test a, a:visited { text-decoration:none;填充：4px 12px； }
不客气，很高兴它成功了 :)

标签： html css internet-explorer-8 padding spacing

【解决方案1】：

如果您希望访问链接和普通链接使用相同的样式，请使用 #test a 而不是 #test a:link。仅使用 a 将为链接的所有状态添加样式（除非在其他地方指定，例如：a:hover, a:visited）

在您的情况下，您没有 :visited 状态的样式，并且由于您只有 a:link 样式规则，因此没有什么可回退的。

【讨论】：