Почему этот код CSS не работает в IE 10 при работе с Firefox и Chrome

0

Этот код отлично работает на Firefox и Chrome, но не на IE 10. Синяя часть не соответствует правильному размеру в IE 10

Я думаю, проблема связана с:

.main-scroll {
    position: relative;
    height:100%;
    width: 100%;
    border-color: blue;
    border-style:solid;
    overflow-y: scroll;
}

который его height: 100% кажется, не работает должным образом. Как я знаю, все используемые стили действительны в HTML 5.0 и CSS 3.0.

Вопрос: Итак, почему этот код не работает должным образом в IE 10 и какой обходной путь?

Теги:
internet-explorer
internet-explorer-10

2 ответа

2
Лучший ответ

установить #body в относительное положение

#body {
    height: 100px;
    width: 200px;
    position:relative;/*so that the children can habe an absolute position*/
}

а потом

.main-scroll {
    position: absolute;
    height:100%;
    width: 100%;
    border-color: blue;
    border-style:solid;
    overflow-y: scroll;
}

Демо: http://jsfiddle.net/8Vu92/3/

я не знаю, что вы пытаетесь сделать, но если вы просто хотите, чтобы синий и красный цвета можно использовать box-shadow

Демо: http://jsfiddle.net/8Vu92/4/

<section class="main">
    This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content.
</section>

css

.main {
    height: 100px;
    width: 200px;
    position:relative;
    overflow:auto;
    border:4px solid blue;
    box-shadow:0 0 0 4px red;
    padding: 10px;
    box-sizing:border-box;
}

ОБНОВЛЕНИЕ: использование преобразования

#body {
    height: 100px;
    width: 200px;
}
.shell {
    height: 100%;
    width: 100%;
    display: table;
    border-color: red;
    border-style:solid;
}

.header-row {
    display: table-row;
    height: 40px
}
.main-row {
    height:100%;
    width: 100%;
    display: table-row;
    border-style:solid;
}
.main-scroll {
    height:120px;
    width: 100%;
    border-color: blue;
    border-style:solid;
    overflow-y: scroll;
    transform:translate3d(0,30px,0);
}
.main {
    display:block;
    height: 100%;
    width: 100%;
}

разметка:

<div id="body">
    <div class="shell">
        <div class="header-row">
            This is the fixed height header
        </div>
        <div class="main-row">
            <div class="main-scroll">
                <section class="main">This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content.</section>
            </div>
        </div>
    </div>
</div>

Демо: http://jsfiddle.net/8Vu92/8/

Поделиться
  • 0
    Спасибо за ответ. Окраска только для уточнения! Ваше первое решение кажется правильным, но изменение этих значений позиционирования невозможно из-за некоторых других соображений, которые я не упомянул в скрипте. Есть ли другое решение, кроме смены позиций?
  • 0
    Проблема в том, что есть еще одна строка заголовка с фиксированной высотой. изменение положения на абсолютное искажает размер. Поскольку первый ряд будет иметь фиксированную высоту, а второй ряд будет заполнять оставшуюся область.
Показать ещё 5 комментариев
0 
.main-scroll {
    position: relative;
    border-color: blue;
    border-style:solid;
    width:150px;
    height:150px;
    overflow:scroll;
}

попробуйте это в IE

Поделиться
  • 0
    Спасибо, но я не хочу фиксированного размера из-за моей ситуации.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню