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.

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top