overflow:hidden not removing horizontal scrollbar from jQuery cycle in IE
-
05-07-2021 - |
题
I am using jQuery.cycle to show three images. Keeping with other answers on this site, I used a combination of min-width
and overflow:hidden
to remove the horizontal scrollbar, which only appears in Internet Exploder Nein.
In case it's relevant, the site uses both the Yii framework and Blueprint.
The horizontal scrollbar is not going away. Why?
Action
<?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');
}
}
View
<?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>
解决方案
I found the problem. jQuery.cycle introduces overflow-x:scroll
, which took precedence over overflow:hidden
. Adding overflow-x:hidden
removes the scrollbar.
不隶属于 StackOverflow