如何修复IE的background-size:封面问题？

Question

我已经在网上搜索了解决方案，但他们都在讨论如何为整个page...but设置背景我需要填写page....how的某个部分我可以这样做吗？

下面是我们覆盖页面的内容，我们有几个不同的部分，在其中一个部分中，我需要将图像的背景大小设置为“have.....on”(这是我唯一次使用这个属性)。这是我用来生成img标签的php函数：

function getRandomFeatureVideo()
{
// Youtube feed
$xml = simplexml_load_file('https://gdata.youtube.com/feeds/api/playlists/A4F160EDF82713A2?v=2');
.
.
.
.
$media = $entry->children('http://search.yahoo.com/mrss/');
  
  // get video player URL
  $attrs = $media->group->player->attributes();
  $watch = $attrs['url'];
  
  $attrs = $media->group->thumbnail[1]->attributes();
  $thumbnail = $attrs['url'];
  $counter++;

  if($counter == $rand)
    { break; }

  $result .='<a rel="prettyVideos"  href="'.$watch.'">
                <img alt="" style="background:url('.$thumbnail.')" src="/images/ytIndex_overlay.png" />
       </a> ';      
    
echo $result;                    
}

和CSS：

.slideshow .video img
{   
cursor:pointer;
width:550px !important;     
height:340px !important;     
background-repeat:no-repeat;    
background-size:cover;
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover;
-ms-interpolation-mode: bicubic;
}

到目前为止，它在Chrome、Safari、Firefox和Opera上的运行情况完全符合我的期望。

​

然而，像往常一样，它在IE中被搞乱了(7/8)

​

我该如何解决这个问题呢？

Answer 1

IE7不以任何方式支持background-size。它只能显示自然大小的图像。

解决这个问题的唯一方法是切换到使用<img>标记，并将其分层到元素后面，这样它看起来就像是背景。

您可以在您的代码中做到这一点；这并不困难。但是，浪费所有其他浏览器中background-size特性的存在将是一种遗憾。

因此，我的首选解决方案是使用polyfill Javascript，它将回填旧版本IE中的功能，以便您可以继续使用标准CSS。

你可以试试这个：https://github.com/louisremi/jquery.backgroundSize.js

希望这能有所帮助。

Answer 2

我发现有人有类似的问题。也许你可以检查一下这个：css background-size cover in internet explorer 7

Answer 3

我不得不放弃这个问题去做其他的事情，但我想应该给你们一个关于这个的更新。这个问题(在某种程度上) fixed...not是一个可靠的解决方案，但它正在使用这个简单的修复方法。

所以这是修改后的CSS...

.slideshow .video img { cursor:pointer; width:550px !important;

`height:340px !important;    -moz-background-size:cover;    -webkit-background-size: cover;     -o-background-size: cover;    background-size: cover;    background-position:center;}`

和IMG标签...

<img alt="" style="background:url('.$thumbnail.')" src="/images/ytIndex_overlay.png" style="background-repeat: no-repeat" style="background-size:cover"/>

(我知道这很混乱！)感谢Spudley，Shadowizoo，BoltClock和Ben的时间和建议。