0
我在一个页面上有一个宽的iframe,我想使它可以水平滚动。为了实现这一点,我把它放在一个div中,并使用CSS来使div成为可滚动的元素。溢出滚动不能在容器div上工作
这一切都运行良好一段时间,但我必须改变的东西,打破了功能。我所做的一切似乎都没有让它再次起作用。 div显示正常,但ifame内容被切断(就像我已经将overflow-x设置为隐藏)。如果我将overflow-x设置为auto,即使div的内容太宽,也不会出现滚动条。如果我设置overflow-x滚动,那么滚动条会出现,但是不会被激活。我究竟做错了什么?
HTML
<div class="PopularTravelAccessories Centre">
<h3 style="color:#e47911; font-family:Arial, Helvetica, sans-serif; text-align:left; line-height:0.2;">Title</h3>
<iframe src="/path-to-iframe.php?" frameborder="no" scrolling="no"></iframe>
</div>
CSS
\t .PopularTravelAccessories
\t \t {
\t \t \t width:100%;
\t \t \t max-width: 500px;
\t \t \t position:relative;
\t \t \t -webkit-overflow-scrolling: touch;
\t \t \t overflow-x: auto;
\t \t \t overflow-y: hidden; /*Remove vertical scroll bar*/
\t \t \t border-top:1px;
\t \t \t border-top-style:dashed;
\t \t \t border-top-color:#999999;
\t \t \t margin-top:10px;
\t \t \t border-bottom:1px;
\t \t \t border-bottom-style:dashed;
\t \t \t border-bottom-color:#999999;
\t \t \t margin-bottom:10px;
\t \t }
\t \t
\t \t .PopularTravelAccessories iframe
\t \t \t {
\t \t \t \t width: 100%;
\t \t \t \t height:215px;
\t \t \t }