Аккордеон "вырастает" из своего контейнера - в IE7 / 8 - PullRequest
Новая
       21

Аккордеон "вырастает" из своего контейнера - в IE7 / 8

0 голосов
/ 14 января 2011

Я думаю, что эту проблему лучше всего объяснить изображениями.Вот как выглядит мой аккордеон:

alt text

Когда вы нажимаете на маленькие значки плюс / минус, слайды под каждой главой расширяются / сворачиваются.Однако, когда содержание в аккордеоне становится слишком высоким, оно вырастает из своего контейнера.Поэтому, если я нажму на дополнительные значки плюс, аккордеон будет выглядеть так (не красиво):

alt text

Как вы можете видеть, контейнер не растет выше вместе с аккордеоном иэто не выглядит хорошо.

Эта проблема возникает только в IE7 и IE8.Он работает в Firefox и Chrome.

HTML выглядит следующим образом (упрощенно): 

<div id="content">
    <div class="box2 rounded-corners">
        <div class="chapters">
            <h3><a href="/clientarea/view/archived-course/teid/133">Obsah</a></h3>
            <div id="accordion">
                <ul>
                            ... // accordion content - too long
                            ... // accordion content - too long
                            </ul>
                <div class="clear">&nbsp;</div>
        </div>
        <div class="clear">&nbsp;</div>
            </div>
            <div class="training-body">
                ... // content to the right of the accordion
            </div>
        </div>
</div>

CSS, опять упрощенный: 

html, body {
    height: 100%;
    width: 100%;
    overflow: auto;
}
#content {
    background: white url('/images/background_middle.png') left top repeat-x;
    padding: 13px;
    min-height: 40em;
    height: auto !important;
    height: 40em;
}
/* this is the div with rounded corners */
#content .box2  {
    background: white;
    padding: 0 15px 15px;
    border: 1px solid #C5E3F8;
    position: relative;
}
/* left sidebar 98
#content div.chapters {
    float: left;
    width: 224px;
}
/* orange heading "OBSAH" */
#content div.chapters h3 {
    color: #ff6e19;
    text-transform: uppercase;
    font-size: .9em;
    text-align: center;
    padding-bottom: .5em;
    margin-top: 1em;
    margin-bottom: 0;
}
#content div.chapters h3 a {
    color: #ff6e19;
}
/* accordion */
#accordion {
    width: 226px;
    border-top: 1px solid #c5e3f8;
}
#accordion ul {
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
}
/* area to the right of the accordion */
#content div.training-body {
    float: left;
    padding-left: 0px;
    width: 748px;
    line-height: 1.3em;
}

Ответы [ 2 ]

3 голосов
/ 14 января 2011

Хммм, после многих исследований выяснилось, что плагин curvycorners вызывает проблему, вот что вам нужно сделать:

  1. Загрузите последнюю версию плагина (также попробуйте обновить jQuery, но это только совет)

  2. измените свой CSS с закругленными углами на следующее: 

    .rounded-corners {
  -moz-border-radius:2ex;
  -webkit-border-radius:2ex;
}

  3. в вашем JS и после toggle в UL вам нужно redraw углы, см. , используя следующее: 

    $this.parent().parent().children('ul').toggle();
curvyCorners.redraw();
1 голос
/ 14 января 2011

РЕДАКТИРОВАТЬ извините, мой первый ответ был неверным

Проблема с установленной вами минимальной высотой.IE 7 и 8 поддерживают min-height, но неправильно обрабатывают! Важный, не отдавая ему приоритет перед следующим объявлением.Чтобы решить, просто удалите две линии высоты.Если вы хотите поддерживать IE6, добавьте правило высоты, как показано ниже: 

...
  min-height: 40em;
}
* html #content {
  height: 40em;
}
...