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

Question

我在使用 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 中工作

如果您需要更多信息，请告诉我并生病post。

任何帮助都会很棒！

李

Answer 1

您的标记有误，您的 h3 元素没有关闭。

更正：

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

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

Styling Boxes in ie9 - CSS Cross Browser Issue

html

css

internet-explorer

cross-browser