我正在使用jQuery.cycle来显示三张图像。与本网站上的其他答案保持一致,我使用了min-width
和overflow:hidden
的组合来删除水平滚动条,该滚动条仅出现在Internet Exploder Nein中。
如果相关,该网站同时使用 Yii 框架和蓝图。
水平滚动条不会消失。为什么?
行动
<?php
class IndexAction extends CAction
{
public function run()
{
$ds = DIRECTORY_SEPARATOR;
$cs = Yii::app()->clientScript;
$cs->registerScriptFile( $ds. 'js' . $ds .
'jquery.cycle.all.js', CClientScript::POS_HEAD );
$cs->registerScript( 'cycle', "$('.pics').cycle({
fx: 'scrollLeft',
containerResize: false,
slideResize: false,
width:960,
height:300,
fit:true
});", CClientScript::POS_END );
$this->controller->render('index');
}
}
视图
<?php
Yii::app()->clientScript->registerCss('ServicesCycleSlideShow',"
.pics {
min-width:960px;
height:300px;
padding:0;
margin:0;
overflow:hidden;
}
.pics img {
padding: 0;
margin: 0;
border: none;
min-width: 960px;
height: 300px;
overflow:hidden;
}");
?>
<div class="pics">
<img src="/images/1.png" width="960" height="300" />
<img src="/images/2.png" width="960" height="300" />
<img src="/images/3.png" width="960" height="300" />
</div>
我发现了问题。 jQuery.cycle 引入了 overflow-x:scroll
,它优先于 overflow:hidden
。添加overflow-x:hidden
会删除滚动条。