css - Chrome 中不必要的垂直滚动条

Question

使用 Joomla 扩展 JCE Mediabox ，我在灯箱中显示动态内容。我将高度设置为 auto，这一切都有效，但在 Chrome 上(据报道在 Safari 上)，即使容器足够大，我也会得到一个滚动条:

现场: http://www.drumcafe.de/team/musiker -> 点击其中一位名字为橙色的音乐家

(我不能简单地将代码复制到 JsFiddle，我必须包含整个插件)

• 容器的高度设置为auto/CSS
• parent的高度由扩展/JS设置
• Chrome 报告的像素高度对于容器和内容(均为整数)相同
• 容器中没有其他元素
• 内容没有绝对放置，没有偏移，也没有边框
• 容器设置为 overflow-y: auto;，因为它必须在较小的屏幕上显示更多内容

滚动条从何而来？(我该如何摆脱它？)

请记住，我需要 overflow: auto

编辑: 好吧，您要求提供相关代码，但是，如果没有周围的工作站点，恐怕它本身可能不会有多大用处。 在这里:

HTML:

<div id="jcemediabox-popup-body" style="display: block; top: 0px; height: 889px; width: 1573px;">
    <div id="jcemediabox-popup-container" style="display: block;">
        <div id="jcemediabox-popup-loader" style="display: none;"/>
        <div id="jcemediabox-popup-content" style="display: block; width: 1573px; height: 889px; opacity: 1;">
            <div id="jcemediabox-popup-ajax" style="display: block;"> <!-- this is where the scrollbar occurs -->
                <div id="overall">
                    <div id="system-message-container">
                    </div>
                    <div class="item-page" itemscope="" itemtype="http://schema.org/Article">
                        <meta itemprop="inLanguage" content="de-DE">
                        <div itemprop="articleBody">
                            <div class="ma-box">
                                <img alt="20141012 drum-cafe-nathan-berg 038 foto mario-andreya Kopie thumb" src="/images/stories/bilder_musiker/20141012_drum-cafe-nathan-berg_038_foto_mario-andreya%20Kopie_thumb.jpg" height="330" width="220"/>
                                <div class="idbox">179</div>
                                <div class="maright">
                                    <p class="name">Nathan Lennart Berg</p>
                                    <p class="jahrgang">1979</p>
                                    <div class="vita">
                                        <ul>
                                            <li>Geb. in Minden</li>
                                            <li>Ab 1999 Malinke-Percussionausbildung bei verschiedenen Lehrern, v.a. Famoudou Konaté &amp; Söhnen</li>
                                            <li>2000/01 Ausbildung in trad. kuban. Percussion auf Kuba</li>
                                            <li>Ab 2004 Proben und Rhythmusunterricht in Trier</li>
                                            <li>2006/07 Ausbildung zum psycho-sozialen Coach</li>
                                            <li>2008 Auftritte mit der Gruppe DeruBey</li>
                                            <li>2009 Abschluss des Psychologie-Studiums (Diplom)</li>
                                            <li>2009 Rhythmusstudien-/Inspirationsaufenthalt in Guinea</li>
                                            <li>2009 Umzug und Gründung der Percussionschool Beat-Etage in Berlin</li>
                                            <li>2009 Anstellung in der ambulanten Jugendhilfe in Berlin – Rhythmusprojekte mit Familien</li>
                                            <li>2009/2010 Rhythmustrainings mit der Bigband Güstrow</li>
                                            <li>Ab 2010 professionelle Auftritte mit der Band SésséPercussion in Kooperation mit Tänzern</li>
                                            <li>Seit 2010 Durchführung interaktiver Trommelevents mit Drum Cafe Deutschland</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <a id="jcemediabox-popup-next" href="javascript:;" title="weiter" class="jcemediabox-popup-link" style="display: none;"/>
        <a id="jcemediabox-popup-prev" href="javascript:;" title="zurück" class="jcemediabox-popup-link" style="display: none;"/>
    </div>
    <div id="jcemediabox-popup-info-bottom" style="display: block; visibility: visible; z-index: -1; top: 0px;">
        <a id="jcemediabox-popup-closelink" href="javascript:;" title="Schließen" class="jcemediabox-popup-link" style="display: block;">&nbsp;</a>
        <div id="jcemediabox-popup-caption" style="display: block;"/>
        <span id="jcemediabox-popup-numbers" style="display: block;"/>
    </div>
</div>

CSS:

#jcemediabox-popup-body {
    position: relative;
    overflow: visible;
    margin: 0 auto;
    z-index: 10002;
    max-width: 960px;
}

#jcemediabox-popup-container {
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

#jcemediabox-popup-content{
display:block;
height: auto!important;
}

/* This is the container */
#jcemediabox-popup-ajax{
    display: block;
    max-width: 960px;
    height: auto!important;
    overflow: auto;
    border: 0;
    padding: 0;
    margin: 0;
    width: auto;
}

/* This is the content div */
#overall{
    max-width: 960px;
}

Answer 1

您将需要覆盖 JCE Mediabox 样式， 问题出在#jcemediabox-popup-ajax 有自动溢出。 如果您将 css 文件中的此类更改为:

#jcemediabox-popup-ajax{
overflow: hidden !important;
}