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

已将height: 500px的{{1}}替换为。height: -webkit-fill-available;类。并删除了hero的高度，因为.eventWrapper仅适用于chrome firefox，但不知道什么是Webkit。希望这对您有所帮助，并将height: -webkit-fill-available;类添加到clearfix div中。谢谢

检查以下链接。 https://codepen.io/Xenio/pen/KEopEv

Answer 2

此处的问题是由于缺乏对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 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>

如何跨浏览器对齐Bootstrap列中的元素

3 个答案: