html - 关键帧图像幻灯片有效但不适用于 WordPress

Question

我正在使用关键帧制作图像幻灯片。我已经在另一个站点上完成了此操作，并且我使用的是相同的 CSS。它也适用于 JS Fiddle，但不适用于 WordPress。我尝试摆脱 WordPress 放置在图像上的默认类，我什至尝试使用 !important。 JSFiddle 上的代码:https://jsfiddle.net/Ldej2wvd/

    .sideImage {
    width: 300px;
    height: 180px;
    }
    .slideshow {
        position: relative;
        height: 220px;

    }
    .slideshow figure {
        position: absolute;
        opacity: 1;
        margin-left: -20px;
        width: 300px;
        height: 220px;
        overflow: hidden; 
    }
    .slideshow figure:nth-child(2) {
        animation: xfade 36s 0s infinite;
       -moz-animation: xfade 36s 0s infinite;
       -webkit-animation: xfade 36s 0s infinite;
       -o-animation: xfade 36s 0s infinite;
    }
    .slideshow figure:nth-child(3) {
        animation: xfade 36s 6s infinite;
       -moz-animation: xfade 36s 6s infinite;
       -webkit-animation: xfade 36s 6s infinite;
       -o-animation: xfade 36s 6s infinite;
    }
    .slideshow figure:nth-child(4) {
       animation: xfade 36s 12s infinite;
       -moz-animation: xfade 36s 12s infinite;
       -webkit-animation: xfade 36s 12s infinite;
       -o-animation: xfade 36s 12s infinite;
    }
    .slideshow figure:nth-child(5) {
       animation: xfade 36s 18s infinite;
       -moz-animation: xfade 36s 18s infinite;
       -webkit-animation: xfade 36s 18s infinite;
       -o-animation: xfade 36s 18s infinite;
    }
    .slideshow figure:nth-child(6) {
       animation: xfade 36s 24s infinite;
       -moz-animation: xfade 36s 24s infinite;
       -webkit-animation: xfade 36s 24s infinite;
       -o-animation: xfade 36s 24s infinite;
    }
    .slideshow figure:nth-child(7) {
       animation: xfade 36s 30s infinite;
       -moz-animation: xfade 36s 30s infinite;
       -webkit-animation: xfade 36s 30s infinite;
       -o-animation: xfade 36s 30s infinite;
    }



    <table><tr><td width="400px">
    <div id="KekoaTextBox" color="#161447"><h3><strong>This site is a resource for the language industry, including translation, interpretation, and localization. Also, check here and our <a href="https://www.facebook.com/groups/689448181135760/">Facebook page</a> to stay up to date on club events. Club meetings are Thursdays at 11 AM!</strong></h3></div>
    </div></td><td width="300px"><div class="slideshow">
    <figure><img src="http://l10n.byu.edu/files/2015/03/IMG_0020-225x300.jpg" alt="Trados Dylan" class=" sideImage" /></figure>
    <figure><img src="http://l10n.byu.edu/files/2014/11/Screen-Shot-2015-02-04-at-2.44.27-PM-300x223.png" alt="Benjamin Dowdy" width="300" height="223" class=" sideImage" /></figure><figure><img src="http://l10n.byu.edu/files/2015/02/IMG_20150212_112128_4651-300x225.jpg" alt="IMG_20150212_112128_465[1]" class=" sideImage" /></figure><figure><img src="http://l10n.byu.edu/files/2015/01/ClubFlier-300x225.jpg" alt="Opening Flier" width="300" height="225" class=" sideImage" /></figure><figure><img src="http://l10n.byu.edu/files/2014/12/BYU_campus_dark_winter-300x128.jpg" alt="BYU campus at night" width="300" height="128" class=" sideImage" /></figure><img src="http://l10n.byu.edu/files/2015/02/IMG_20150212_112215_0601-300x169.jpg" alt="Trados training" class=" sideImage" /></figure></div></td></tr>
    <tr><td>[widgets_on_pages]</td>
    </tr></table>

Answer 1

查看源代码，我意识到 WordPress 在 CSS 中我有额外行(空行)的任何地方添加了愚蠢的

和

标签。在去掉多余的行后，它工作得很好。