0

IE9截图
在此处输入图像描述
嘿，你们！我正在使用 Nivo Slider 构建一个站点（我通常在这方面取得了巨大的成功）。但是我对这种特殊用法有一些我无法弄清楚的问题。您的代码向导的任何帮助将不胜感激！

测试站点在这里。

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

然而，在 IE9 中，滑块看起来很棒，直到它转换到下一个图像。滑块使用 float:right 属性，在 Explorer 中，每次转换都会导致图像瞬间跳到容器 div 的左侧。 这个问题解决了。 “float:right” 属性仅放置在滑块图像上，而不是滑块容器本身。更正后的代码现在会导致单个图像和整个滑块容器都向右浮动。

在 Safari 中，滑块看起来很棒，除非您将页面大小调整为小于 100% - 然后，图像不会随着周围的内容而缩小。

在 Chrome 中，令人惊讶的是，这一切都搞砸了。首次加载时，滑块不会出现。如果我将查看大小减小到 90%，它看起来很好，包括当我将大小恢复到 100% 时。但是，标题功能并没有像在其他浏览器上那样弹出（请参阅该站点以了解我的意思）。 解决了这个问题事实证明，控制幻灯片的子弹是问题所在。或者，更准确地说，它们周围的 div 是。.controlNav 项目符号的 div 有一个 "position:absolute" 属性，在所有其他浏览器中都可以正常工作，但不知何故搞砸了 Chrome。我完全消除了这些项目符号，因为它们对于这个特定站点实际上不是必需的。问题解决了。 不幸的是，所使用的方法完全破坏了 Safari 对滑块的渲染，所以现在我必须弄清楚这一点。

我对此主题进行了大量搜索，发现 Nivo Slider 存在许多问题，尤其是在 IE 中，但没有与我所经历的完全相关的问题。我怀疑某些问题是由滑块通常不使用的 float:right 属性引起的（大多数网站以页面居中的容量使用它），但我不知道这是绝对的肯定。

这是滑块 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>

我很感激你们能想出的任何和所有提示！

4

1 回答 1

0

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

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

于 2013-02-19T22:21:42.170 回答