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

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>

调整大小.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;
}

Answer 1

这里的问题是 IE 7 不支持 css display: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