Flex布局在Firefox与IE中的兼容问题求助

我帮你排查了一下，这几个跨浏览器问题其实是Flexbox的兼容性细节和IE对Font Awesome的支持问题导致的，你的核心实现思路没问题，调整几个小地方就能解决：

一、解决Firefox/IE的布局偏移问题 #

你的布局依赖Flexbox，但不同浏览器对Flex容器的默认行为有细微差异：

• Firefox的左偏移：Flex容器的子元素在Firefox中可能没有正确继承垂直对齐规则，导致内部元素偏移。
• IE的右偏移：IE对justify-content: center的处理存在小bug，同时min-width和width同时设置会导致宽度计算异常。

具体修复： #

• 给.service-block-container添加align-items: center，确保子元素垂直居中，消除偏移基础；
• 将.service-block的min-width:180px; width:180px;替换为flex: 0 0 180px;，用Flex的固定宽度语法替代传统宽度设置，跨浏览器更稳定；
• 给.service-block添加align-items: flex-start，确保内容顶部对齐，避免垂直方向的意外偏移。

二、解决IE中Font Awesome图标无法加载的问题 #

IE对<em>标签结合Font Awesome伪元素的支持不佳，官方推荐用<i>标签作为图标容器，替换后IE就能正常识别图标样式了。另外如果使用的是Font Awesome v5+，建议切换到v4.x版本，因为v5对IE11的支持有限。

修改后的完整代码 #

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"> 
              <i class="fa fa-code"></i> 
            </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"> 
              <i class="fa fa-barcode"></i> 
            </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"> 
              <i class="fa fa-gbp"></i> 
            </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"> 
              <i class="fa fa-support"></i> 
            </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"> 
              <i class="fa fa-cogs"></i> 
            </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"> 
              <i class="fa fa-pie-chart"></i> 
            </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; 
  align-items: center; /* 添加垂直居中 */
} 
.service-block { 
  flex: 0 0 180px; /* 替换原width/min-width */
  height:200px; 
  position:relative; 
  transition: all .3s ease-in-out; 
  overflow:hidden; 
  display:flex; 
  justify-content: center; 
  align-items: flex-start; /* 确保内容顶部对齐 */
  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; 
}

这些调整后，你的布局在Chrome、Firefox和IE中都能正常对齐，图标也能在IE里显示了。

内容的提问来源于stack exchange，提问作者Lewis Hamill