Вопросы Теги

Flexbox с FF и IE [дубликат]

С помощью FluidXML вы можете запрашивать и выполнять итерацию XML с помощью селекторов XPath и CSS. 

$doc = fluidxml('...');

$title = $doc->query('//head/title')[0]->nodeValue;

$doc->query('//body/p', 'div.active', '#bgId')
        ->each(function($i, $node) {
            // $node is a DOMNode.
            $tag   = $node->nodeName;
            $text  = $node->nodeValue;
            $class = $node->getAttribute('class');
        });

https://github.com/servo-php/fluidxml

13
задан TranquilMarmot 13 December 2015 в 10:01
поделиться

3 ответа

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

  • Внешний с размерами, границами и переполнением
  • Внутренний с стилями flexbox

Если вы хотите, чтобы по умолчанию она была прокручена вниз, вы можете использовать JS: Прокрутите вниз до div? 

function scrollToBottom(el) { el.scrollTop = el.scrollHeight; }
scrollToBottom(document.getElementById('list'));
#list {
  height: 250px;
  overflow-y: scroll;
  border: 1px solid black;
}
#inner-list {
  display: flex;
  flex-direction: column-reverse;
}
.item {
  flex: 1;
  padding: 2em;
  border: 1px dashed green;
}
<div id="list">
  <div id="inner-list">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
  </div>
</div>

10
ответ дан Community 26 August 2018 в 11:41
поделиться

Это ошибка в Firefox, Edge и IE11.

С flex-direction: column-reverse полоса прокрутки появляется только в Chrome.

Если вы переключитесь на column, полоса прокрутки Работает во всех браузерах.

Дополнительная информация:

10
ответ дан Michael_B 26 August 2018 в 11:41
поделиться 
#list {
  /*display: flex;
  flex-direction: column-reverse;*/
  height: 250px;
  -ms-overflow-y:scroll;
  overflow-y:scroll;
  border: 1px solid black;
}

Ваша проблема возникает из-за отображения: flex; свойство, которое не поддерживается в IE 8 и IE 9! :)

-4
ответ дан Nasco.Chachev 26 August 2018 в 11:41
поделиться