Css sur IE7 position div incorrecte

Question

S'il vous plaît voir l'image ci-dessus. Je fais de mon mieux pour laisser [div1] dans le en bas de [div2] dans IE7. mais faild.S'il vous plaît aidez-moi. S'il vous plaît voir l'image ci-dessus. Je fais de mon mieux pour laisser [div1] dans le en bas de [div2] dans IE7. mais faild.S'il vous plaît aidez-moi. S'il vous plaît voir l'image ci-dessus. Je fais de mon mieux pour laisser [div1] dans le en bas de [div2] dans IE7. mais faild.S'il vous plaît aidez-moi.

<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 et au-dessous est mort, la base IE de l'utilisateur est trop faible (2015 December 6,3%) et IE 10 and below is only 1,4%. Vous devriez arrêter le code anti-fou pour les personnes en âge de pierre. Par ailleurs, l'utilisation de CSS en ligne n'est pas une bonne pratique et vous devriez éviter cela.

Answer 2

La meilleure façon de résoudre votre problème est de faire une css pour IE ne faire une nouvelle feuille de style et un lien vers elle comme ce

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

Maintenant, vous avez en feuille de style qui aura seul effet sur les navigateurs IE

Mais comme indiqué ci-dessus. ci-dessous IE 10 est mort, ne style pour cela. Et évitez le style en ligne. pour votre propre bien.