1

我必须调整屏幕上按钮的初始尺寸为 157*70px，屏幕上所需的尺寸为 100*50px。它必须与 IE8 兼容，其中 background-size 属性不起作用，尽管此属性在 FF 中可以正常工作。

HTML：

<div id="return_button">
<a class="new_return_button" name="PREVIOUS">Previous</a>
</div>

CSS：（火狐）

.new_return_button{
background: url("images/previous.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
backgound-size: 100px 50px;
color: #FFFFFF;
cursor: pointer;
display: block;
height: 70px;
line-height: 70px;
width: 157px;
}

#return_button{
color: #FFFFFF;
font-weight: bold;
height: 70px;
left: 10px;
line-height: 70px;
margin: 0;
position: absolute;
text-align: center;
width: 157px;

}

这个 css 在具有 background-size 属性的 Firefox 中可以正常工作，并将 157*70px 的图像缩小到 100*50px 的区域，但在 IE8 中不起作用。

请提出解决此问题的方法

4

1 回答 1

0

解决这个问题的一种方法是使用另一个元素。您可能需要调整 的边距<span>以使其按需要工作。另请注意，这并不能保证特定的高度，而是会为您提供缩放图形的正确纵横比。

<style>
#return_button {
  position: relative;
  width: 100px;
}

#return_button img {
  max-width: 100%;
  height: auto;
}

#return_button span {
  position: absolute;
  top: 50%;
  margin-top: -5px;
  left: 10px;
  right: 10px;
  text-align: center;
}
</style>


<div id="return_button">
  <img src="images/previous.png" alt="Button graphic">
  <span>Button label</span>
</div>
于 2013-11-07T12:20:14.420 回答