Почему мой HTML-код html работает только в некоторых браузерах?

Я попытался реализовать HTML-флексографские ящики на своем веб-сайте, и пока страница работает так, как ожидалось, в моем браузере на рабочем столе, в моем браузере планшета это не так. Страница состоит из двух строк, заголовков и содержимого. Заголовок div имеет высоту, основанную на содержимом внутри него. Содержимое div имеет высоту, которая определяет высоту заголовка от общей высоты страницы. Содержимое div настроено на прокрутку переполнения.Почему мой HTML-код html работает только в некоторых браузерах?

В моем браузере для рабочего стола, когда в строке «content» flex отображается слишком много контента, div становится прокручиваемым. Однако в моем браузере планшета строка flex расширяет свою высоту, чтобы стать достаточно большой, чтобы содержать весь ее контент.

Desktop Browser: Google Chrome (версия 44.0.2403.157), Safari (версия 8.0.2 (10600.2.5)) Mobile Browser: Google Chrome (версия 31.0.1650.18)

Мои код

<html> 
<head> 
<style> 
.box { 
    display: flex; 
    flex-flow: column; 
    height: 100%; 
    width: 50%; 
    border: 2px solid; 
} 


.box .row { 
    flex: 0 1 30px; 
    border: 2px solid; 
} 

.box .row.header { 
    flex: 0 1 auto; 
    max-width: 100%; 
} 

.box .row.content { 
    flex: 1 1 auto; 
    overflow: scroll; 
    max-width: 100%; 
} 
</style> 
</head> 
<body> 
<div id="page-wrapper" style="height: 100%"> 
<div class="box"> 
<div class="row header"> 
Header - The height of the header is based on the content 
</div> <!-- end of flex row header --> 
<div class="row content"> 
Content - The height of the content row is the total broswer height minus the header height 
<br> 
<br> 
<br> 
Content - The height of the content row is the total broswer height minus the header height 
<br> 
<br> 
<br> 
Content - The height of the content row is the total broswer height minus the header height 
<br> 
<br> 
<br> 
Content - The height of the content row is the total broswer height minus the header height 
<br> 
<br> 
<br> 
Content - The height of the content row is the total broswer height minus the header height 
<br> 
<br> 
<br> 
Content - The height of the content row is the total broswer height minus the header height 
<br> 
<br> 
<br> 
Content - The height of the content row is the total broswer height minus the header height 
<br> 
<br> 
<br> 
Content - The height of the content row is the total broswer height minus the header height 
<br> 
<br> 
<br> 
Content - The height of the content row is the total broswer height minus the header height 
<br> 
<br> 
<br> 
Content - The height of the content row is the total broswer height minus the header height 
<br> 
<br> 
<br> 
Content - The height of the content row is the total broswer height minus the header height 
<br> 
<br> 
<br> 
Content - The height of the content row is the total broswer height minus the header height 
<br> 
<br> 
<br> 
Content - The height of the content row is the total broswer height minus the header height 
<br> 
<br> 
<br> 
Content - The height of the content row is the total broswer height minus the header height 
<br> 
<br> 
<br> 
Content - The height of the content row is the total broswer height minus the header height 
<br> 
<br> 
<br> 
Content - The height of the content row is the total broswer height minus the header height 
<br> 
<br> 
<br> 
Content - The height of the content row is the total broswer height minus the header height 
<br> 
<br> 
<br> 
Content - The height of the content row is the total broswer height minus the header height 
<br> 
<br> 
<br> 

</div> <!-- end of flex row content --> 
</div> <!-- end of flex box --> 
</div> <!-- end of page wrapper --> 
</body> 
</html>

источник

2015-09-29 Alex Wetton

Вы пропускаете префиксов в ваших примерах кода. [Flexbox] (https://css-tricks.com/using-flexbox/) – sareed

В соответствии с http://caniuse.com/#feat=flexbox для некоторых версий Chrome и Safari для iOS требуется префикс '-webkit-' при использовании свойства flexbox. Вы пробовали это? – Marcelo

Я не знал, что мне нужно добавить префиксы, можете ли вы ответить со всеми необходимыми префиксами, чтобы сделать сайт совместимым с максимально возможным количеством браузеров? Спасибо за вашу помощь :) –

Поскольку не все браузеры поддерживают flex или все функции flex и other measures like prefixes возможно потребуется добавить поддержку. Обязательно проверьте Известные проблемы вкладка от caniuse.com#feat=flexbox.

CSS Flexible Box Layout Module Level 1 в настоящее время в Last Call Working Draft начиная с 14 мая, 2015.

источник

2015-09-29 20:34:35 hungerstar

В версиях браузера он отлично работает с Flexbox. – Rob

@Rob Нет, Safari по-прежнему нуждается в префиксе '-web-kit' даже в версии 8. И согласно документации (известные проблемы - см. Chrome):' В Chrome и Safari высота (non flex) детей не признается в процентах. Однако Firefox и IE распознают и масштабируют детей на основе процентных высот. «Он использует проценты. – disinfor

Не в соответствии с caniuse: http://caniuse.com/#search=flex – Rob

Почему мой HTML-код html работает только в некоторых браузерах?

ответ

Смежные вопросы