Firefox和IE的Flex问题

Question

我已经在这里设置了一个代码库，H/pen/ZKBzBx。

在Firefox和IE中，我发现了一些奇怪的行为，但在Chrome中，它运行得很好，因为这是我设计它的浏览器。乍一看，这个问题应该是显而易见的，但内部框错对齐了--在Firefox中左边，IE中右边。此外，图标甚至没有加载在IE中。

有人能说明一下这个问题吗？我这样做是完全错误的吗？

完整代码显示如下：

<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:0; right:0;后，项目在所有浏览器中都正确地居中。

图标的问题是我的IE隐私设置。

Answer 2

我将left: auto;添加到您的.service-icon样式中，它似乎解决了火狐上的问题(因为我在Mac上，所以不能测试IE)。图标可能会被抵消，因为它不像Chrome那样计算默认的left值。

另外，帮你自己一个忙，缩进你的代码。CodePen在HTML > Tidy的选项中为您做这件事。