Question

IE9 screenshot
enter image description here
嘿，你们呀！我正在使用Nivo Slider（我通常取得了巨大的成功）建立了一个网站。但我对这个特殊用法存在一些问题，我无法弄清楚。任何代码向导的帮助将不胜感激！

测试网站为here.

在Firefox中，像往常一样，该网站看起来很棒。一切正常，没有任何损失。在Opera中，几乎一样。

但是，在IE9中，滑块看起来很棒，直到它转换到下一个图像。滑块使用float：right属性，并且在资源管理器中，每次转换都会导致图像暂时一直跳到容器div的左侧。 解决了这个问题。“浮动” ：右边的“属性”只放在滑块图像上，而不放在滑块容器本身。现在，更正后的代码会使单个图像和整个滑块容器向右浮动。

在Safari中，除非您将页面调整为小于100％的任何值，否则滑块看起来很棒 - 然后，图像不会随周围内容缩小。

在Chrome中，令人惊讶的是，事情已经搞砸了。首次加载时，不会出现滑块。如果我将观看尺寸减小到90％，它看起来很好，包括当我的尺寸恢复到100％时。但是，标题功能并没有像在其他浏览器上那样弹出（请参阅网站以了解我的意思）。 解决了这个问题事实证明子弹是那样的控制幻灯片是问题所在。或者，更准确地说，他们周围的div是。 .controlNav项目符号的div有一个“位置：绝对”属性，在所有其他浏览器中运行良好，但无论出于何种原因，它都搞砸了Chrome。我完全消除了这些子弹，因为它们对于这个特定的站点来说真的不是必需的。问题解决了。 不幸的是，使用的方法完全破坏了滑块的Safari渲染，所以现在我必须弄明白。

我已经对这个主题进行了相当多的搜索，发现了Nivo Slider的许多问题，特别是在IE中，但没有任何与我遇到的问题完全相关的问题。我怀疑一些问题是由浮动：右边的属性引起的，滑块通常不会与之一起使用（大多数网站都以页面为中心的容量使用它），但我不知道这是绝对的一定。

下面是滑块HTML（Nivo Slider有一个CSS的公制按钮，因此我不会在此处粘贴它。您可以使用浏览器的开发人员工具查看样式表。）：

<div id="header">
    <div class="layout-wrapper">
        <aside id="slider" class="theme-default">
            <div id="nivo-slider" class="nivoSlider slider-underline">
                <img src="images/slider-img1.jpg" class="attachment-slider_nivo" title="#slide-1" />
                <img src="images/slider-img2.jpg" class="attachment-slider_nivo" title="#slide-2" />
                <img src="images/slider-img3.jpg" class="attachment-slider_nivo" title="#slide-3" />
            </div>
            <!-- end #nivo-slider -->
            <div id="slide-1" class="nivo-html-caption" data-position="right">
                <span class="slider_title">Tile and Ceramic Cleaning</span>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc suscipit. Suspendisse enim arcu, convallis non, cursus sed, dignissim et, est. Aenean semper aliquet libero.</p>
                <a href="#" title="" class="more align-right">Read more »</a>
            </div>
            <!-- end #slide-1 -->
            <div id="slide-2" class="nivo-html-caption" data-position="left">
                <span class="slider_title">Kitchen Cleaning and Sanitizing</span>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc suscipit. Suspendisse enim arcu, convallis non, cursus sed, dignissim et, est. Aenean semper aliquet libero.</p>
            </div>
            <!-- end #slide-2 -->
            <div id="slide-3" class="nivo-html-caption" data-position="right">
                <span class="slider_title">Full Residential Services!</span>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc suscipit. Suspendisse enim arcu, convallis non, cursus sed, dignissim et, est. Aenean semper aliquet libero.</p>
            </div>
            <!-- end #slide-3 -->
        </aside>
        <div class="banner-1"></div>
        <!-- end #slider -->
    </div>
    <!-- end .layout-wrapper -->
</div>
<!-- end #header -->
<div class="clear"></div>

我感谢大家提出的所有提示！

Answer 1

将<aside>标记替换为<div>标记。我在chrome检查器工具中做到了这一点，之后似乎工作正常。

我现在在4-5个不同的网站上使用nivo-slider，从未看到它使用<aside>标记。

Nivo Slider在多个浏览器中呈现问题

1 个答案: