0

display: inline-block 属性を使用して、2 つの列に表示される 6 つの画像があります。しかし、IE10 互換モードでページをテストすると、画像が 2 列ではなく 1 列で表示されます。

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;
}
4

1 に答える 1

2

互換性をテストしている IE のバージョンはどれですか?

IE8 より前のバージョンでは inline-block 属性を使用しません。代わりにフロートを使用してみてください。

于 2013-08-19T17:33:12.823 に答える