javascript - RoyalSlider 的高度在 Safari 初始化时最小

Question

我正在使用enquire.js将我的 RoyalSlider 的高度动态设置为它旁边元素的高度。这在 Firefox 中有效，但在 Safari 加载时，滑块的高度是可能的最小高度（因此是箭头的高度）。只有在我调整窗口大小后，才会调整正确的高度。

enquire.register("screen and (max-width: 53.999em)", {
    match : function() {
        $('.slide').css('height', "10em");
    }
}).register("screen and (min-width: 54em)", {
    match : function() {
        var height  = $('.one:first').outerHeight(true) * 2;
        $('.slide').css('height', height);
        window.onresize = function() {
            var height = $('.one:first').outerHeight(true) * 2;
            $('.slide').css('height', height);
        }
    },
    unmatch : function() {
        $('.slide').css('height', "10em");
    }
});

我试图在 CSS 中为初始加载设置一个静态高度，但样式不适应。

Answer 1

现在可以使用仅使用 CSS 的解决方案了 :)

看到这个：https ://stackoverflow.com/a/6615994/1478344

HTML：

<div id="slide-container">
     <div id="slide">
         SLIDE
     </div>
</div>

CSS：

#slide-container
{
display: inline-block;
position: relative;
width: 66.666%;
}
#gallery-container:after
{
content: '';
display: block;
margin-top: 30.333%;
margin-top: -moz-calc( 33.333333% - 1.111111em ); /* because of some padding things */
margin-top: -webkit-calc( 33.333333% - 1.111111em ));
margin-top: calc( 33.333333% - 1.111111em );
}
#slide {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: silver /* show me! */
}

虽然对于未来我不知道为什么它不起作用......</p>