Firefox 和 IE 的 Flex 问题

Question

我在这里设置了一个codepen https://codepen.io/Lewy_H/pen/ZKBzBx。

我在 Firefox 和 IE 中遇到了奇怪的行为，但它在 Chrome 中运行良好，因为这是我设计它的浏览器。问题乍一看应该很明显，但内部框未对齐 - 在 Firefox 中左侧和IE中的权利。此外，图标甚至无法在 IE 中加载。

有人能解释一下这个问题吗？我只是以完全错误的方式处理这个问题吗？

完整代码如下：

HTML

<section class="section section-default mt-none mb-none section-services">
<div class="container">
   <h2 class="mb-sm">
      Our <strong>Services</strong>
   </h2>
<div class="row">
<div class="col-xs-12 col-sm-4 col-lg-2">
<div class="service-block-container">
<div class="service-block">
<div class="service-underlay">
<span class="service-name">
Web Applications
</span>
<a class="cta" href="/services/web-applications">Learn More</a>
</div>
<span class="service-icon">
<em class="fa fa-code"></em>
</span>
<span class="service-desc">
Bespoke web applications for end to end solutions
</span>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-lg-2">
<div class="service-block-container">
<div class="service-block">
<div class="service-underlay">
<span class="service-name">
ERP
</span>
<a class="cta" href="/services/enterprise-resource-planning">Learn More</a>
</div>
<span class="service-icon">
<em class="fa fa-barcode"></em>
</span>
<span class="service-desc">
World leading enterprise resource planning software
</span>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-lg-2">
<div class="service-block-container">
<div class="service-block">
<div class="service-underlay">
<span class="service-name">
Accounting Solutions
</span>
<a class="cta" href="/services/accounting-solutions">Learn More</a>
</div>
<span class="service-icon">
<em class="fa fa-gbp"></em>
</span>
<span class="service-desc">
Installation and support of Sage and Pegasus Opera
</span>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-lg-2">
<div class="service-block-container">
<div class="service-block">
<div class="service-underlay">
<span class="service-name">
Support Solutions
</span>
<a class="cta" href="/services/support-solutions">Learn More</a>
</div>
<span class="service-icon">
<em class="fa fa-support"></em>
</span>
<span class="service-desc">
Maintenance and support of infrastructure
</span>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-lg-2">
<div class="service-block-container">
<div class="service-block">
<div class="service-underlay">
<span class="service-name">
Bespoke Solutions
</span>
<a class="cta" href="/services/bespoke-solutions">Learn More</a>
</div>
<span class="service-icon">
<em class="fa fa-cogs"></em>
</span>
<span class="service-desc">
Creative solutions to make your job easier
</span>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-lg-2">
<div class="service-block-container">
<div class="service-block">
<div class="service-underlay">
<span class="service-name">
Infrastructure Planning
</span>
<a class="cta" href="/services/infrastructure-planning">Learn More</a>
</div>
<span class="service-icon">
<em class="fa fa-pie-chart"></em>
</span>
<span class="service-desc">
Communications and networking made simple
</span>
</div>
</div>
</div>
</div>
</div>
</section>

CSS

.service-block-container {
  display:flex;  
  justify-content: center;
}

.service-block {
  min-width:180px;
  width:180px;
  height:200px;
  position:relative;
  transition: all .3s ease-in-out;
  overflow:hidden;
  display:flex;  
  justify-content: center;
   text-align:center;
  background-color: #fff;
  color:#666;
  border:1px solid #ccc;
  margin-bottom:30px;
   padding:0 10px;
}

.service-underlay {
  height:60px;
  width:100%;
  position:absolute;
  bottom:0;
  background-color: rgb(226, 226, 226);
  padding-top: 18px;
  transition: all .3s ease-in-out;
}

.service-icon {
  position:absolute;
  top:30px;
  font-size: 30px;
  transition: all .3s ease-in-out;
    color: #737373;
}

.service-name {
  margin:0 auto;
  display:block;
   text-transform: Capitalize;
}

.service-desc {
  display:block;
  font-size:12px;
  margin-top: 75px
}

.service-underlay .cta {
  margin-top:115px;
  display: inline-block;
  color:#fff;
  font-size: 14px;
}

.service-block:hover {
  transform: scale(1.1);
  cursor:pointer;
  border:1px solid #141b41;
}

.service-block:hover .service-underlay{
  height: 200px;
  background-color: #141b41;
}

.service-block:hover .service-icon {
  color:#fff;
  transform: scale(1.5);
  top:80px;
}

.service-block:hover .service-name {
  color:#fff;
  font-weight:bold;
}

.service-block:hover .service-desc {
  display:none;
}

.service-block .service-underlay .cta:hover {  
  text-decoration:none;

}

Answer 1

我将left: auto; 添加到您的.service-icon 样式中，它似乎解决了Firefox 上的问题（因为我在Mac 上无法测试IE）。该图标可能是偏移的，因为它不会像 Chrome 那样计算默认的 left 值。

另外，请帮自己一个忙并缩进您的代码。 CodePen 在 HTML > Tidy HTML 选项中为您完成。

Answer 2

所以问题在于 service-icon 和 service-underlay 类的绝对定位。添加left:0; right:0; 后，项目在所有浏览器中都正确居中。

图标问题与我的 IE 隐私设置有关。