Question

在页面的最底部，IE 7中没有正确显示三个读取更多按钮。为什么会这样？我已经尝试了一切！

http://tjonesandson.co.uk/

.readmore {
  background-image: url("images/readmore-left3.png");
  display: block;
  float: right;
  height: 24px;
  margin-top: 10px;
}

.readmore a {
  background: url("images/readmore-right3.png") no-repeat scroll right center transparent;
  color: #414040;
  display: block;
  float: right;
  font-family: Arial;
  font-size: 11px;
  height: 21px;
  margin-right: -15px;
  padding: 3px 10px 0;
  text-shadow: 1px 1px 0 #FFFFFF;
}

Answer 1

你可以试试这个。将a的显示设置为内联块（您可能需要减小填充顶部和底部）

.readmore a {display:inline-block;}

Answer 2

如果您在display: block标记上添加了a，则会解决您的问题。内联元素通常不具有垂直填充，这就是IE在IE中看起来不同的原因。您必须通过将其更改为块级元素来使其行为。添加display: block将解决此问题。

Answer 3

尝试使用Strict而不是Transitional ...过渡并不是更好（如果不是相同的）怪癖模式。

IE 7显示背景图像按钮的问题

3 个答案: