IE8 没有在 div 中统一显示图像答案

【问题标题】：IE8 not displaying images uniformly within divsIE8 没有在 div 中统一显示图像
【发布时间】：2015-02-14 03:04:08
【问题描述】：

我的网站由 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;
    }

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

【问题讨论】：

标签： html css internet-explorer-8

【解决方案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/

【讨论】：