仅在IOS设备上使用flexslider 2的容器高度问题 [英] Container height issue using flexslider 2 only on IOS device
问题描述
我有一张flexslider幻灯片，其中有一张图片和一个用于显示特色文字的位置.在整个站点上，它从左侧的图像开始，右侧是浮动的特色文本区域.这两个项目都在一个包含黑色背景的div中.
I have a flexslider slideshow with an image and a spot for featured text. On the full site it starts with the image to the left and the featured text area to the right (floated). Both of these items are in a containing div with a black background.
当屏幕缩小时，我已经通过媒体查询使图像位于顶部，而特色文本区域位于其下方，并且两者均为100％.它们是相对的，因此其下方的内容将根据精选文本区域中的文本量来更改位置.
When the screen is shrunk down I have through media queries made the image go on top and the featured text area go below it and both are 100%. They are relative so content below it changes position based on the amount of text in the featured text area.
下图是文本最多的旋转器示例.如您所见，图像占据了顶部，绿色占据了底部.您甚至看不到容器div的背景，因为其中的内容填满了整个容器.
The image below is an example of the rotator with the most text. As you can see the image takes up the top part and the green takes up the bottom. You don't even see the background of the container div because the contents fill up the whole container.
此示例显示了iPhone上发生的事情.其他幻灯片仍然以某种方式影响着容器的高度.实际上，即使看不到任何链接，在该灰色区域中仍可单击链接.
This example shows what is happening on the iPhone. The other slides are somehow still affecting the height of the container. Matter of fact the links are still clickable in that gray area even though nothing is visible.
什么可能导致此问题?它仅在iPhone上而不在浏览器中发生.在浏览器上，容器会调整大小，并且内容会根据绿色区域的高度移动，但在IOS上，容器会显示旋转器中最大的幻灯片的高度，即使显示的是:无. 容器的高度为自动，并且正在使用溢出:隐藏.
What could be causing this issue? It only happens on the iPhone not in the browser. On the browser the container resizes and the content shifts based on the height of the green area, but on IOS it takes the height of the largest slide in the rotator even though it's display: none. The container has a height of auto and is using overflow: hidden.
推荐答案
我实际上从未找到过使flexslider正常工作的解决方案，因此我改用了具有adaptiveHeight选项的BXSlider.
I actually never found a solution to get flexslider working, so I switched to using the BXSlider which has an adaptiveHeight option.
这篇关于仅在IOS设备上使用flexslider 2的容器高度问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
