兼容模式下的IE 10正在搞乱内联块代码

Question

我有6张图片，在display：inline-block属性的帮助下显示在两列中。但是当我在IE10兼容模式下测试页面时，图片显示在一列而不是两列。

HTML

<div style="width:700px; margin-bottom: 15px;" >
    <img src="images/IMG_0021.JPG" alt="" style="width: 100%; margin-top: 20px; margin-left: 18px; margin-right:10px;"/>
</div>
<div style="width: 700px; float: right; height: 274px;">
    <p>test para</p>
    <p>test para </p>
</div>

<div style="">
    <div class="singleBlock">
        <div class="inline">
            <img src="images/IMG_0013.JPG" alt="" style="" class="singlePic"/>
        </div>
        <div class="inline">
            <p  style="" class="text" ><strong>Ryan</strong></p>
            <p class="fnt">Year: S</p>
            <p class="fnt">Major:&nbsp;M</p>
        </div>
    </div>
    <div class="singleBlock">
        <div class="inline">
            <img src="images/IMG_0020.JPG" alt="" style="" class="singlePic"/>
        </div>
        <div class="inline">
            <p style="" class="text"><strong>John</strong></p>
            <p class="fnt">Year: s</p>
            <p class="fnt">Major:&nbsp; M</p>
        </div>
    </div>
</div>

<div>
    <div class="singleBlock">
        <div class="inline">
            <img src="images/IMG_0018.JPG" alt="" style="" class="singlePic"/>
        </div>
        <div class="inline">
            <p style="" class="text"><strong>Albert</strong></p>
            <p class="fnt">Year: S</p>
            <p class="fnt">Major:&nbsp; M</p>
        </div>
    </div>
    <div class="singleBlock">
        <div class="inline">
            <img src="images/IMG_0015.JPG" alt="" style="" class="singlePic"/>
        </div>
        <div class="inline">
            <p style="" class="text"><strong>Matt</strong></p>
            <p class="fnt">Year: S</p>
            <p class="fnt">Major:&nbsp; I</p>
        </div>
    </div>
</div>

<div>
    <div class="singleBlock">
        <div class="inline">
            <img src="images/IMG_0014.JPG" alt="" style="" class="singlePic"/>
        </div>
        <div class="inline">
            <p style="" class="text"><strong>Sh</strong></p>
            <p class="fnt">Year: S</p>
            <p class="fnt">Major:&nbsp; M</p>
        </div>
    </div>
    <div class="singleBlock">
        <div class="inline">
            <img src="images/IMG_0012.JPG" alt="" style="" class="singlePic"/>
        </div>
        <div class="inline">
            <p style="" class="text"><strong>Joshua </strong></p>
            <p class="fnt">Year: S</p>
            <p class="fnt" >Major:&nbsp; M</p>
        </div>
    </div>
</div>

CSS

.singlePic{
    width: 125px;
    height: 125px;
}

.singleBlock {
    width:335px;
    display: inline-block;
    margin-left: 18px;
}

.inline {
    display: inline-block;
    float:left;
}

Answer 1

您使用兼容性测试哪个IE版本？

IE8不使用inline-block属性的版本较少。尝试使用浮点数。