html - ie9中的样式框-CSS跨浏览器问题

我在ie9中的网站遇到了一些麻烦。

这些框应像下面的屏幕截图一样堆叠到各个项目中，但在ie9中，底部的简介文本区域会为其自身创建一个单独的框，并且会格格不入。

它看起来应该像这样：
http://pagedev.co.uk/qube-issue/2.png
但它是这样的：
http://pagedev.co.uk/qube-issue/1.png

我的html是：

<div class="projects-wrapper">
    <!--Open Brief Project-->
    <div class="projects-single">
        <a href="#"><img src="<?php the_field( 'thumbnail' ); ?>"></a>
        <div class="project-intro">
            <h3><?php the_field( 'project_title' ); ?><h3>
        </div>
    </div>
    <!--Close Brief Project-->
</div>

我的CSS是：

.projects-wrapper {
    width:100%;
    height:auto;
    margin-bottom:45px;
}

.projects-single {
    width:30%;
    height:auto;
    display:inline-block;
    background-color:#ffffff;
    margin-right:3%;
    margin-bottom:35px;
    vertical-align:top;
    float:left;
}

.projects-single img {
    width:100%;
    height:auto;
    margin-bottom:-5px;
}

.project-intro  {
    width:83%;
    height:auto;
    padding-left:8%;
    padding-right:8%;
    padding-top:6%;
    padding-bottom:6%;
}

.project-intro h3   {
    margin-bottom:0px;
    font-size:15px;
}

我正在努力弄清楚我需要进行哪些更改才能使其在ie9中工作

如果您需要更多信息，请告诉我，请稍等。

任何帮助将是巨大的！

背风处

最佳答案

标记中有错误，您的h3元素未关闭。

已更正：

<h3><?php the_field( 'project_title' ); ?></h3>