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＆gt;选项中为您完成整洁的HTML。

Answer 2

所以问题在于服务图标和服务底层类的绝对定位。添加left:0; right:0;后，项目在所有浏览器中都正确居中。

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

Firefox和IE的Flex问题

2 个答案: