owl carousel 2顶级值（元素风格）总是24px

Question

我在不同页面上使用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);
});

然后我有一个关于prev和下一个按钮的CSS：

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

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