垂直/水平居中的流体幻灯片

Question

我尝试制作垂直/水平居中的流体幻灯片，但似乎是这样，幻灯片不在Internet Explorer 7中垂直居中，并且Internet Explorer 9和10存在一些问题。有人可以帮助我改进我的代码。 垂直中心的顶部和底部边缘也有一些像素差异。

感谢

工作例如：http://goo.gl/DesJo

使用：ResponsiveSlides

PS：有没有办法提前下载所有图像？

HTML：

<div id="content"> 
    <article class="layer"> 
    <div class="wrap"> 
     <ul class="rslides"> 
     <li><img src="01.jpg" alt=""></li> 
     <li><img src="02.jpg" alt=""></li> 
     <li><img src="03.jpg" alt=""></li> 
     <li><img src="04.jpg" alt=""></li> 
     <li><img src="05.jpg" alt=""></li> 
     <li><img src="06.jpg" alt=""></li> 
     <li><img src="07.jpg" alt=""></li> 
     <li><img src="08.jpg" alt=""></li> 
     <li><img src="09.jpg" alt=""></li> 
     </ul> 
    </div> 
    </article> 
    <article class="layer"></article> 
</div> 

的JavaScript：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script src="js/resize.js"></script> 
<script src="js/responsiveslides.min.js"></script> 
<script> 
    $(function() { 
    $(".rslides").responsiveSlides({ 
     fx: 'fade', 
     speed: 0, 
     timeout: 3000, 
     random: true 
     }); 
    }); 
</script> 

resize.js

/*window.onresize = function(){ 
    $('article.layer img').css({ 
    maxHeight: $('article.layer').height() * 0.8, 
    maxWidth: $('article.layer').width() * 0.8 
    }); 
};*/ 

$(window).resize(function(){ 
    $('article.layer img').css({ 
    maxHeight: $('article.layer').height() * 0.8, 
    maxWidth: $('article.layer').width() * 0.8 
    }); 
}); 

CSS（wihtout CSSreset和菜单）

body { 
    font-family: 'theantiquab_w5_plainregular'; 
    color: #000; 
} 
a { 
    text-decoration: none; 
    color: #000; 
} 
a:hover { 
    color: #e84a36; 
} 
@font-face { 
    font-family: 'theantiquab_w5_plainregular'; 
    src: url('theantiqua-webfont.eot'); 
    src: url('theantiqua-webfont.eot?#iefix') format('embedded-opentype'), url('theantiqua-webfont.woff') format('woff'), url('theantiqua-webfont.ttf') format('truetype'), url('theantiqua-webfont.svg#theantiquab_w5_plainregular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 
article, aside, figure, footer, header, hgroup, menu, nav, section { 
    display: block; 
} 
html, body, #content { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
} 
article.layer { 
    position: relative; 
    display: table; 
    height: 100%; 
    width: 100%; 
} 
div.wrap { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
} 
article.layer img { 
    max-width: 80%; 
    max-height: 80%; 
} 
/* http://responsive-slides.viljamis.com */ 

.rslides { 
    display: inline-block; 
    position: relative; 
    list-style: none; 
    overflow: hidden; 
    width: 100%; 
    padding: 0; 
    margin: 0; 
} 
.rslides li { 
    position: absolute; 
    display: none; 
    width: 100%; 
    left: 0; 
    top: 0; 
} 
.rslides li:first-child { 
    position: relative; 
    float: left; 
} 
.rslides img { 
    height: auto; 
    border: 0; 
} 

Answer 1

这里的问题是，IE 7不支持CSS显示：table-cell，所以你应该添加一个表格以便将内容居中。

<!--[if gt IE 7]><!--><div id="content"> 
    <article class="layer"> 
    <div class="wrap"><!--<![endif]--> 
     <!--[if lte IE 7]><table class="layer" style="margin:0 auto;height:100%;"><tr><td class="wrap" style="vertical-align:middle;"><![endif]--> 
     <ul class="rslides"> 
     <li><img src="01.jpg" alt=""></li> 
     <li><img src="02.jpg" alt=""></li> 
     <li><img src="03.jpg" alt=""></li> 
     <li><img src="04.jpg" alt=""></li> 
     <li><img src="05.jpg" alt=""></li> 
     <li><img src="06.jpg" alt=""></li> 
     <li><img src="07.jpg" alt=""></li> 
     <li><img src="08.jpg" alt=""></li> 
     <li><img src="09.jpg" alt=""></li> 
     </ul> 
    <!--[if gt IE 7]><!--> 
    </div> 
    </article> 
    <!--<![endif]--> 
<!--[if lte IE 7]></td></tr></table><![endif]--> 

要预装，你应该使用JavaScript这里有一个答案的所有图像：Preloading images with jQuery