如何跨浏览器对齐 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%}

Here's my codepen

Chrome 浏览器（完美）

这里是 IE/Firefox (SUCKS)

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 中运行。

请查看codepen链接：https://codepen.io/rhythm19/pen/BbrjNV

Answer 2

使用 height: 500px 代替 height: -webkit-fill-available; 到 .hero 类。并删除了 .eventWrapper 的高度，因为 height: -webkit-fill-available; 仅适用于 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>