我尝试制作垂直/水平居中的流体幻灯片，但看起来如此，幻灯片在 Internet Explorer 7 中不是垂直居中的，并且 Internet Explorer 9 和 10 存在一些问题。也许有人可以帮助我改进我的代码。垂直中心的顶部和底部边距也存在一些像素差异。
谢谢
工作示例：http: //goo.gl/DesJo
使用：响应式幻灯片
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>
调整大小.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（没有 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;
}