html - IE 10 in compatibility mode is messing with the inline-block code -
i have 6 pictures displayed in 2 columns of display: inline-block attribute. when test out page on ie10 compatibility mode pictures displayed in 1 column instead of two.
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: 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: 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: 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: 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: 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: 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; }
which ie version testing compatability?
versions less ie8 not use inline-block attribute. try using floats instead.
Comments
Post a Comment