0

我在不同的页面上使用 owl carousel 2。我到处使用相同的 css 和 js。出于某种原因，当我加载我的页面时，导航按钮（上一个和下一个）总是获得 24px 的内联样式顶部值。我从来没有在我的 js 或 CSS 的任何地方声明过 24px 的最高值。

这是我的 HTML：

<div class="pdf-gallery">
        <p class="headline">Lorem ipsum dolor sit amet, consectetuer</p>

        <div class="download">
            <div class="image">
                <figure>
                    <a href="lightbox-imagegallery.html?image=0">
                        <!-- image=2 als Übergabe an die Bildergalerie in der Lightbox; sorgt dafür, dass das richtige Bild geöffnet wird (beginnt mit 0) -->
                        <img src="img/content/image.jpg" alt="Alttext"/>
                    </a>
                </figure>
            </div>
            <div class="caption">
                <a href="" class="title">Lorem ipsum dolor sit amet, consectetuer</a>

                <p class="info">PDF deutsch | 123 kB</p>
            </div>
        </div>
        <div class="download">
            <div class="image">
                <figure>
                    <a href="lightbox-imagegallery.html?image=1">
                        <img src="img/content/content.jpg" alt="Alttext"/>
                    </a>
                </figure>
            </div>
            <div class="caption">
                <a href="" class="title">Lorem ipsum dolor sit</a>

                <p class="info">PDF deutsch | 123 kB</p>
            </div>
        </div>
        <div class="download">
            <div class="image">
                <figure>
                    <a href="lightbox-imagegallery.html?image=2">
                        <img src="img/content/thumbnail.jpg" alt="Alttext"/>
                    </a>
                </figure>
            </div>
            <div class="caption">
                <a href="" class="title">Lorem ipsum dolor sit amet, consectetuer adipiscing</a>

                <p class="info">PDF deutsch | 123 kB</p>
            </div>
        </div>
        <div class="download">
            <div class="image">
                <figure>
                    <a href="lightbox-imagegallery.html?image=3">
                        <img src="img/content/content.jpg" alt="Alttext"/>
                    </a>
                </figure>
            </div>
            <div class="caption">
                <a href="" class="title">Lorem ipsum dolor sit amet</a>

                <p class="info">PDF deutsch | 123 kB</p>
            </div>
        </div>
        <div class="download">
            <div class="image">
                <figure>
                    <a href="lightbox-imagegallery.html?image=4">
                        <img src="img/content/image.jpg" alt="Alttext"/>
                    </a>
                </figure>
            </div>
            <div class="caption">
                <a href="" class="title">Lorem ipsum dolor sit amet, consectetuer adipiscing</a>

                <p class="info">PDF deutsch | 123 kB</p>
            </div>
        </div>
        <div class="download">
            <div class="image">
                <figure>
                    <a href="lightbox-imagegallery.html?image=5">
                        <img src="img/content/image.jpg" alt="Alttext"/>
                    </a>
                </figure>
            </div>
            <div class="caption">
                <a href="" class="title">Lorem ipsum dolor sit amet, consectetuer</a>

                <p class="info">PDF deutsch | 123 kB</p>
            </div>
        </div>
    </div>

这就是我在 js 中加载 owl-carousel 的方式：

$j('.pdf-gallery').each(function () {
    var $slider = $j(this),
        opts = {
            responsive: {},
            smartSpeed: 800,
            loop: false,
            nav: true,
            navRewind: false,
            navText: ['', ''],
            onInitialized: function () {
                $slider.find('.owl-dots, .owl-nav').wrapAll('<div class="owl-controls">');
            },
            onResized: function () {
                $slider.find('.download .image').setEqualHeight('auto');
                $slider.find('.download .caption').setEqualHeight('auto');
            }
        };

    //Paging-Container
    $slider.find('> div').wrapAll('<div class="wrapper owl-carousel">');

    //responsive definition
    opts.responsive[0] = {items: 1};
    opts.responsive[mediaqueries.maxMobile] = {items: 2};
    opts.responsive[mediaqueries.softTablet] = {items: 3};
    opts.responsive[890] = {items: 4};
    if ($slider.parents('.wide, #full-width').length) {
        opts.responsive[mediaqueries.maxDesktop] = {items: 6};
    }

    if ($j('html').hasClass('lt-ie9')) {
        opts.responsive = false;
        if ($slider.parents('.wide, #full-width').length) {
            opts.items = 4;
        } else {
            opts.items = 3;
        }
    }

    //init
    $slider.find('.wrapper').owlCarousel(opts);
});

然后我有一个用于上一个和下一个按钮的 CSS：

.owl-next,
            .owl-prev {
                color: @darkBlue;
                cursor: pointer;
                font-size: 22px;
                position: absolute;
                text-decoration: none;
                top: 2px; }

所以我觉得我的按钮应该有值 top: 2px。但相反，他们总是得到一个内联样式 top: 24px ，它会覆盖我的 top: 2px 值。这是在某处设置的默认值吗？但是为什么我在其他地方使用相同的代码呢？

4

0 回答 0