Как выровнять элементы в столбцах Bootstrap в разных браузерах

Question

У меня есть центральная (и многослойная) мертвая точка экрана с изображениями и липкая навигация под изображениями. Он отлично работает в Chrome, но не в IE и Firefox.

Что мне не хватает?

Вот HTML

<div class="row">
  <div class="eventWrapper">
    <div class="col-md-6">
      <div class="hero">
        <img src="http://via.placeholder.com/300/00f" class="eventHeroImg imgFire">
          <img src="http://via.placeholder.com/200/fff" class="eventHeroImg imgLight">
          <img src="http://via.placeholder.com/100/f00" class="eventHeroImg imgChange">
      </div><!--/hero-->
    </div><!--/col-6-->
    <div class="col-md-6">
      <div class="hero">
        <div class="solgan-column">
          <img src="http://via.placeholder.com/300/f00" class="eventHeroImgimgFire">
          <img src="http://via.placeholder.com/200/fff" class="eventHeroImg imgLight">
          <img src="http://via.placeholder.com/100/00f" class="eventHeroImg imgChange">          
        </div><!--/slogan-column-->
       </div><!--/hero-->
    </div><!--/col-6-->
  </div><!--/wrapper-->
</div><!--/row-->

<!--
<div class="row">
  <div class="col-md-12">
    <div class="fullwidth_header_scroll">
      <a href="#nav">
        <i class="fas fa-angle-double-down fa-3x centerArrowBottom wow fadeIn" data-wow-delay="1.5s" data-wow-duration="2s"></i>
      </a>
    </div><!--/fullwidth--> 
  </div><!--/12-->
</div><!--/row-->




<ul id="nav">
  <li><a class="active" href="#top">Top</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#sponsorship">something</a></li>
</ul>


<script src="https://wowjs.uk/dist/wow.min.js"></script>
    <script>
     new WOW().init();
    </script>

А вот и CSS

html {scroll-behavior: smooth}

body {
  font-size: 16px; margin: 0;
}

ul#nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: -ms-sticky;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

ul#nav li {
  float: left;
}

ul#nav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

ul#nav li a:hover {
  background-color: #111;
}

.active {
  background-color: #000066;
}

.hero {
    height: -webkit-fill-available;
  }

img.eventHeroImg, .solgan-column {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
.imgLight {
  z-index: 3;
}
.imgChange {
  z-index: 5;
}

.imgFire {
  z-index: 1;
}



.centerArrowBottom {margin: auto !important;
    color: white;
  vertical-align: baseline;}

.fullwidth_header_scroll {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: 30px;
    margin: 0 auto;
    padding-top: 10px;
    padding-bottom: 20px;
    text-align: center;

}

a.fullwidth_header_scroll {scroll-behavior: smooth;}

.centerArrowBottom:hover {
  color: darken(#00f, 10%)
}

.eventWrapper {background-image: url("http://eskipaper.com/images/beach-background-4.jpg");
  background-size: 100%;
    height: -webkit-fill-available;}

.slogan {color: goldenrod; font-weight: bold; text-align: center; font-family: 'Oswald'; font-size: 150%; font-weight: bold; }
.slogan-left {float: left}
.slogan-right {float: right}
.heroEventInfo {font-family: 'Raleway'; font-size: 125%}

Вот мой кодовый блок

Вот с Chrome (ИДЕАЛЬНО)

А вот с IE / Firefox (СОС)

Answer 1

Проблема здесь из-за отсутствия кросс-браузерной поддержки свойства CSS - fill-available. Вы можете проверить матрицу поддержки здесь: https://caniuse.com/#search=fill-available.

Вы использовали -webkit-fill-available, который поддерживаются только браузерами Webkit (chrome / safari). Для firexfox он использует -moz-available.

Вместо этого вы можете использовать 100vh для указания height или min-height на 100% экрана. Я соответственно изменил код, и он работает как в Chrome, так и в Firefox.

Пожалуйста, проверьте кодовую ссылку: https://codepen.io/rhythm19/pen/BbrjNV

Answer 2

используется height: 500px вместо height: -webkit-fill-available; до. hero класса. и удаленная высота .eventWrapper как height: -webkit-fill-available; is будет работать только на Chrome Firefox не знает, что такое webkit. надеюсь, что это поможет и добавил clearfix класс к eventWrapper div. спасибо

проверьте ссылку ниже. https://codepen.io/Xenio/pen/KEopEv

Answer 3

Я добавил комментарий / Модифицированный код /, пожалуйста, проверьте эту часть. Также я немного изменил html структуру, пожалуйста, проверьте

body {
  font-size: 16px; margin: 0;
}


ul#nav li {
  float: left;
}

ul#nav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

ul#nav li a:hover {
  background-color: #111;
}

.active {
  background-color: #000066;
}

img.eventHeroImg, .solgan-column {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
.imgLight {
  z-index: 3;
}
.imgChange {
  z-index: 5;
}

.imgFire {
  z-index: 1;
}
.centerArrowBottom {margin: auto !important;
    color: white;
  vertical-align: baseline;}

.fullwidth_header_scroll {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: 30px;
    margin: 0 auto;
    padding-top: 10px;
    padding-bottom: 20px;
    text-align: center;
}
a.fullwidth_header_scroll {scroll-behavior: smooth;}

.centerArrowBottom:hover {
  color: darken(#00f, 10%)
}

.slogan {color: goldenrod; font-weight: bold; text-align: center; font-family: 'Oswald'; font-size: 150%; font-weight: bold; }
.slogan-left {float: left}
.slogan-right {float: right}
.heroEventInfo {font-family: 'Raleway'; font-size: 125%}

/*Modified code*/
.hero {
	position: relative;
	height: 300px;
	width: 300px;
	margin: 0 auto;
	top: 100px;
}

ul#nav {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #333;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99;
}
.eventWrapper {
	background-image: url("http://eskipaper.com/images/beach-background-4.jpg");
	background-size: 100%;
	height: 100vh;
}
/*Modified code end*/

<div class="eventWrapper"> <!-- Slight change here -->
	<div class="row">
		<div class="col-md-6">
			<div class="hero">
				<img src="http://via.placeholder.com/300/00f" class="eventHeroImg imgFire">
				<img src="http://via.placeholder.com/200/fff" class="eventHeroImg imgLight">
				<img src="http://via.placeholder.com/100/f00" class="eventHeroImg imgChange">
			</div><!--/hero-->
		</div>
		<div class="col-md-6">
			<div class="hero">
				<div class="solgan-column">
					<img src="http://via.placeholder.com/300/f00" class="eventHeroImgimgFire">
					<img src="http://via.placeholder.com/200/fff" class="eventHeroImg imgLight">
					<img src="http://via.placeholder.com/100/00f" class="eventHeroImg imgChange">          
				</div>
			</div>
		</div>
	</div>
</div>

<ul id="nav">
	<li><a class="active" href="#top">Top</a></li>
	<li><a href="#about">About</a></li>
	<li><a href="#sponsorship">something</a></li>
</ul>