1

画面上のボタンのサイズをボタンの初期サイズ157 * 70pxに変更する必要があり、画面上の必要なサイズは100 * 50pxです。このプロパティは FF では正常に機能しますが、background-size プロパティが機能しない IE8 と互換性がある必要があります。

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 は Firefox では background-size プロパティで正常に動作し、157*70px の画像を 100*50px の領域に縮小しますが、IE8 では動作しません。

この問題の解決策を提案してください

4

1 に答える 1

0

これを解決する 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>
于 2013-11-07T12:20:14.420 に答える