Question

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

HTML：

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

CSS：（Firfox）

.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中不起作用。

请建议此问题的解决方案

Answer 1

解决此问题的一种方法是使用另一个元素。您可能需要调整<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>

替换为在IE8中使用的background-size属性

1 个答案: