html - 兼容模式下的 IE 10 与内联 block 代码混淆

Question

在 display: inline-block 属性的帮助下，我有 6 张图片显示在两列中。但是当我在 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 属性。尝试改用 float 。