Css 在 IE7 上 div 位置不正确

Question

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>

Answer 1

IE 10 及以下版本已死，IE 用户基数太低（2015 December 6,3%) and IE 10 and below is only 1,4%。你应该停止为石器时代的人编写防呆代码。顺便说一句，使用内联 CSS 不是'这不是一个好的做法，您应该避免这种做法。

Answer 2

解决您的问题的最简单方法是为 IE 制作一个 css 制作一个新的样式表并 link 像这样

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

现在您有了仅对 IE 浏览器有效的样式表

但是如上所述。 IE 10 以下已经死了，不要为此设计风格。并避免内联样式。为了你好。

Css 在 IE7 上 div 位置不正确

Css on IE7 div position incorrect

css

internet-explorer-7