IE7中的锯齿状图像

Question

我正在与IE7作战，试图“让这件事发生”。问题是我不想使用JavaScript。我希望找到一个解决方案，以防JavaScript未启用。如您所见，图像呈锯齿状，像素化。但是如果我改变图像格式，例如改为JPG，它看起来要好得多。我需要让它们具有透明背景。知道为什么会这样吗？

<div id="container">

<!-- <div id="main" role="main">-->

    <h2>Example</h2>

    <div id="group_1" class="level_1">
        <img src="img/woodMain.jpg"alt=""> 

        <ul id="ul_1" class="level_2">

            <li class="level_2">
              <label class="level_3"><img src="img/newLabel.png"  alt=""></label>
              <img src="img/book_3.png">                 
            </li>

            <li class="level_2">
              <label class="level_3"><img src="img/newLabel.png" alt=""></label>
              <img src="img/book_4.png">                 
            </li>



        </ul>
    </div><!-- ends 1_group -->  

    <div id="2_group" class="ground_cero">

       <img src="img/2_group.png"alt="">

       <!--
        <ul>
            <li>
              <label><img src="" alt=""></label>


            </li>

        -->
    </div><!-- ends 2_group -->  

<!-- </div> --><!-- ends main -->

 </div> <!--! end of #container -->

和css：

body{ max-width: 100%; }

img{ 
/*max-width: 100%;*/
max-width: 100%;
height: auto; 
}


label{
max-width: 30%;
height: auto;
position: absolute;

}

label img{

}

div#container{

margin: auto;
border: 2px solid red;

}
/*
div#container div#main{
*/
/*border: 1px solid black;*/
/*max-width: 70%;
/*z-index: 1;
}*/


div#container div{

margin: auto;
max-width: 82%;
position: relative;
/*border: 1px solid red;*/

}

div#container div img{
width: 100%;
height: auto;
}
div#container  div#group_1 #ul_1{

padding: 0px;   
overflow: hidden;
margin: 0px;
/*border: 1px solid green;*/
bottom: 3%;
left: 0px;
max-width: 100%; 
position: absolute;
margin-left: 2%;



}

div#container div #ul_1 li {
list-style: none;
margin-left: 5%;
display: inline-block; /* others than IE 7 */
position: relative;
zoom: 1; /* calling the haslayut method inside IE7 */
*display: inline; /*targeting IE6-7 */
bottom: 0px;
width: 25%;
vertical-align: bottom;


}