html - 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>

类“vignette”用于提供图像周围的羽化效果。但是，这在 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/