Question

我正在客户网站上实施owl-carousel，但是在chrome + Firefox中进入移动视图时，猫头鹰大小（自动计算）的宽度随着我调整大小并返回正常状态而变得疯狂，宽度约4000像素...等。

P.S。代码在正常的桌面视图下工作正常，而在576px及以下像素上一切都变得疯狂。

我用猫头鹰搜索了猫头鹰阶段宽度问题，发现许多旧的报告和解决方案（包括堆栈溢出）不能解决我的问题，包括设置溢出，删除要调试的猫头鹰选项。

猫头鹰台的宽度应该是正常的，并且不超过屏幕的宽度，这反过来将使它上面的h1完美地位于屏幕的中心。

Answer 1

好吧，我花了超过12个小时来弄清楚为什么这种奇怪的行为。事实证明，如果您使用的是 PagePilling.js （或 fullPage.js ）并尝试与 Owl.Carousel 或任何其他Carousel混合使用插件，由于自动生成的div的css display属性设置为table

而发生冲突

我的案例的解决方案是添加table-layout: fixed：

.pp-section.pp-table {
        display: table;
        table-layout: fixed;
}

如果您有兴趣阅读有关它的更多信息： https://github.com/alvarotrigo/fullPage.js/issues/895

移动（或小型设备）视图上的猫头鹰级宽度大于屏幕

1 个答案: