Search code examples
cssinternet-explorer-7

Css on IE7 div position incorrect

enter image description here

Please see the picture above. I try my best to let [div1] in the bottom of [div2] in IE7. but faild.Please help Me. Please see the picture above. I try my best to let [div1] in the bottom of [div2] in IE7. but faild.Please help Me. Please see the picture above. I try my best to let [div1] in the bottom of [div2] in IE7. but faild.Please help Me. 

<div style="margin-bottom: 10px;overflow: hidden;font-size:12px;">
    <div style="float:left">
        <img style="width: 30px;height: 30px;border-radius: 100%;vertical-align: middle;" src="http://cdn.5u55.cn/face/u0.jpg"> 
        <div style="margin-top:2px;font-size:9px;">name1</div>
    </div>
    <strong style="float: left; border-style: solid; border-width: 10px; border-color: #fff #d4edf4 #fff #fff; height: 0; font-size: 0; width: 0;margin-top:7px;"></strong>
    <div>
    <div style="float:left;display: inline-block;background-color: #d4edf4;position: relative;padding: 10px;line-height: 18px;border-radius: 4px;color: #333;">
         test test test test test test
    </div>
    <br clear="all" /> 
    <div style="float:left;margin-left:60px;color: #ccc;font-size:9px;">2016-02-17 22:21:00</div>
</div>
<br clear="all" /> 
<br clear="all" /> 
<div style="margin-bottom: 10px;overflow: hidden;font-size:12px;">
    <div style="float:right;display: flex;-webkit-box-orient: horizontal;-webkit-box-direction: normal;flex-direction: row;-webkit-box-pack: end;justify-content: flex-end;padding: 5px;">
        <img style="width: 30px;height: 30px;border-radius: 100%;vertical-align: middle;" alt="" src="http://cdn.5u55.cn/face/u0.jpg">
        <div style="margin-top:2px;font-size:9px;">name2</div>
    </div>
    <strong style="float: right; border-style: solid; border-width: 10px; border-color: #fff  #fff #fff #f1ddde ; height: 0; font-size: 0; width: 0;margin-top:10px;margin-left:-1px;"></strong>
    <div style="float:right;background-color: #f1ddde;position: relative;padding: 10px;line-height: 18px;margin-left:42px;color: #333;">
       dadasd
    </div>
    <br clear="all" /> 
    <div style="float:right;color: #ccc;font-size:9px;margin-right:58px;">2016-02-17 22:21:00</div>
</div>
<br clear="all" /> 
<br clear="all" /> 
<div style="text-align: center;width: 100%;margin: 5px auto;font-size: 10px;margin:0 20px 10px;">
    <p style="color:red;background-color: lightGrey;padding: 5px 10px;border-radius: 5px;">thanks</p>
</div>
</html>
Solution

  • IE 10 and below is dead, IE user base is too low (2015 December 6,3%) and IE 10 and below is only 1,4%. You should stop fool-proofing code for stone-age people. By the way using inline CSS isn't a good practice and You should avoid that.