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="#">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>

我已经附上了一些片段, 显示了它们在各个浏览器中的显示方式。

#1

在此处的代码中添加clear：both：

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

来源：

https://www.srcmini02.com/65490.html

#1

猜你喜欢