IE8不能在div中统一显示图像

Question

我的网站由5个div组成（以绿色框表示）。每行应该有3个，你可以在这里查看我的演示站点： http://testsite24.netai.net/public/demo2.html

我的问题是IE8不会以相同的方式显示每个div中的图像。这是一个屏幕截图，显示它们在IE9中显示正确：

这是他们在IE8中显示错误：

其中一个div（绿色框）的html是：

<a href="http://www.demo.com/adfadfadfa">
   <div class="block personal fl">
   <div class="content">
   <p class="price">
<p class="vignette" style="background-image:url(http://upload.wikimedia.org/wikipedia/commons/f/f8/Ellen_H._Swallow_Richards_House_Boston_MA_01.jpg)"></p>
   </p>
     </div>

    <ul class="features">
<li class="titlebox">adfadfadf </li>
<li>adfadfadf</li>
<li>adfadfadf</li>
    </ul>
     </div>              
</a>

您可以看到图像是使用以下行生成的：

<p class="vignette" style="background-image:url(http://upload.wikimedia.org/wikipedia/commons/f/f8/Ellen_H._Swallow_Richards_House_Boston_MA_01.jpg)"></p>

和班级＆＃34;小插曲＆＃34;用于提供图像周围的羽毛效果。但是，IE8似乎并不支持这一点 所以在ie8的条件样式表上，我只需使用

.vignette {
    }

这就是IE8屏幕截图中没有羽毛效果的原因。

但是，为什么IE8不能以相同的方式显示图像？整个.vignette css代码是：

.vignette {
       width: 90%;
       margin-left:auto;
       margin-right:auto;
       margin-bottom:-5%;
        box-shadow: 15px 15px 40px #A1F997 inset,-15px -15px 40px #A1F997 inset;
        height: 290px;
        background-size: cover;
        background-repeat: no-repeat;
    }

任何帮助都会很棒。谢谢！

Answer 1

实际上，background-size是CSS3的所有者，并且在IE8中不起作用，但你可以用类似的东西来实现它（图像必须被定义到CSS中）：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='http://upload.wikimedia.org/wikipedia/commons/f/f8/Ellen_H._Swallow_Richards_House_Boston_MA_01.jpg',
sizingMethod='scale');

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='http://upload.wikimedia.org/wikipedia/commons/f/f8/Ellen_H._Swallow_Richards_House_Boston_MA_01.jpg',
sizingMethod='scale')";

但既然那不是你想要的，也许这会有所帮助：

http://css-tricks.com/perfect-full-page-background-image/