IE7上的Css div位置不正确

Question

  

请参见上图。我尽力让[div1]进入   IE7中[div2]的底部。但是faild。请帮助我。    请看上面的图片。我尽力让[div1]进入   IE7中[div2]的底部。但是faild。请帮助我。    请看上面的图片。我尽力让[div1]进入   IE7中[div2]的底部。但是faild。请帮助我。       

<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>

Answer 1

IE 10及以下版本已失效，IE用户群太低（2015 December 6,3%）和IE 10 and below is only 1,4%。你应该为石器时代的人停止万无一失的代码。顺便说一句，使用内联CSS并不是一种好的做法，你应该避免这种做法。

Answer 2

解决问题的最简单方法是仅为IE制作css 制作一个新的样式表并像这样链接到它

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

现在你的样式表只对IE浏览器产生影响

但如上所述。在IE 10下面已经死了，不要为此风格。并避免内联样式。为了你自己的利益。