HTML/CSS跨浏览器对齐问题

Question

我正在工作一个新的网站(一个高级购买模板Wordpress)。模板开发人员还不能解决这个问题，所以我希望这里的人能够提供帮助。

如果您查看Chrome页面底部的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);
}

最后，“info-节”中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="#">Home 2</a></li>
                            <li class="cat-item cat-item-1"><a href="#">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="#">1996</a></li>
                            <li><a href="#">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>

我附加了几个片段，显示了它如何在各自的浏览器中显示。

​

​

​

​

Answer 1

在您的代码中添加“清除”：

.main-footer .footer-info-section{
 clear:both;
}