HTML/CSS跨浏览器对齐问题

我正在一个新站点上工作(带有高级购买模板的Wordpress)。模板开发人员无法解决此问题, 因此我希望这里有人可以提供帮助。
如果你在Chrome页的底部查看http://test.one.za.com/wp-test/?page_id=112, 则3个联系人div的排列不正确。但是, 如果你在IE或Firefox中查看此页面, 则显示效果很好。
对于我的一生, 我无法弄清楚这是什么或如何解决。
这是CSS:
页脚的主要容器:

.main-footer { position: relative; background-color: #303030; overflow: hidden; }

这是” 信息部分” 的容器:
.main-footer .footer-info-section { position: relative; margin-top: -5px; background-color: #303030; border-top: 1px solid rgba(255, 255, 255, 0.10); border-left: 1px solid rgba(255, 255, 255, 0.10); border-right: 1px solid rgba(255, 255, 255, 0.10); }

最后, 在” 信息部分” 内的div代码:
.main-footer .footer-info-section .info-block { position: relative; }

整个页脚部分的HTML:
< footer class="main-footer"> < !--Widgets Section--> < div class="auto-container"> < div class="widgets-section"> < div class="row clearfix"> < div class="widget_text footer-column col-md-4 col-sm-6 col-xs-12"> < div class="widget_text footer-widget widget_custom_html" id="custom_html-2"> < h2> Test 1< /h2> < div class="textwidget custom-html-widget"> sdgsfhdfgg sdfgs dfg sfg fgdgsdfg sdfg sdfg sdf< /div> < /div> < /div> < div class="footer-column col-md-4 col-sm-6 col-xs-12"> < div class="footer-widget widget_categories" id="categories-2"> < h2> Test 2< /h2> < ul> < li class="cat-item cat-item-16"> < a href="http://www.srcmini.com/#"> Home 2< /a> < /li> < li class="cat-item cat-item-1"> < a href="http://www.srcmini.com/#"> Uncategorized< /a> < /li> < /ul> < /div> < /div> < div class="footer-column col-md-4 col-sm-6 col-xs-12"> < div class="footer-widget widget_recent_entries" id="recent-posts-2"> < h2> Test 3< /h2> < ul> < li> < a href="http://www.srcmini.com/#"> 1996< /a> < /li> < li> < a href="http://www.srcmini.com/#"> Hello world!< /a> < /li> < /ul> < /div> < /div> < /div> < /div> < !--Footer Info Section--> < div class="footer-info-section"> < div class="row clearfix"> < !--Info Block--> < div class="info-block col-md-4 col-sm-6 col-xs-12"> < div class="inner"> < div class="icon fa fa-glass"> < /div> < h4> Contact 1< /h4> < div class="text"> Contact 1< /div> < /div> < /div> < !--Info Block--> < div class="info-block col-md-4 col-sm-6 col-xs-12"> < div class="inner"> < div class="icon fa fa-music"> < /div> < h4> Contact 2< /h4> < div class="text"> Contact 2< /div> < /div> < /div> < !--Info Block--> < div class="info-block col-md-4 col-sm-6 col-xs-12"> < div class="inner"> < div class="icon fa fa-heart"> < /div> < h4> Contact 3< /h4> < div class="text"> Contact 3< /div> < /div> < /div> < /div> < /div> < /div> < !--Footer Bottom--> < div class="footer-bottom"> < div class="auto-container"> < div class="row clearfix"> < div class="column col-md-6 col-sm-12 col-xs-12"> < div class="copyright"> ONE Insurance Underwriting Managers (PTY) LTD Reg No. 1996/008987/07 Authorised Financial Services Provider FSP8783 VAT No. 4370160501 < /div> < /div> < div class="nav-column col-md-6 col-sm-12 col-xs-12"> < ul class="footer-nav"> < !-- This is just where the foot-nav is located. Redacted this because the links and class names for those links are tediously long and makes this even harder to read --> < li> Footer-nav 1< /li> < li> Footer-nav 2< /li> < li> Footer-nav 3< /li> < /ul> < /div> < /div> < /div> < /div> < !--End Footer Bottom--> < /footer>

我已经附上了一些片段, 显示了它们在各个浏览器中的显示方式。
HTML/CSS跨浏览器对齐问题

文章图片
HTML/CSS跨浏览器对齐问题

文章图片
#1 【HTML/CSS跨浏览器对齐问题】在此处的代码中添加clear:both:
.main-footer .footer-info-section{ clear:both; }

    推荐阅读