The text under the scrolling picture is misaligned in IE8 and runs to the top of the picture. IE6, 7 and FF display normally_html/css_WEB-ITnose

            <div class="project">                <div class="project_more">                    <a href="Team.aspx?code=myfcitem">                        <img  src="/static/imghwm/default1.png"  data-src="images/more.gif"  class="lazy"   / alt="The text under the scrolling picture is misaligned in IE8 and runs to the top of the picture. IE6, 7 and FF display normally_html/css_WEB-ITnose" ></a></div>                <div id="divx1"   style="max-width:90%" heigth="155px">                    <ul>                        <table>                            <tr>                                <asp:repeater id="rptContentMYFC" runat="server">                            <ItemTemplate><td>              	 <li><a href='TeamView.aspx?Key=<%#Eval("id") %>'>              	 <img  src='<%#GetImg(Eval("imgPath")) % alt="The text under the scrolling picture is misaligned in IE8 and runs to the top of the picture. IE6, 7 and FF display normally_html/css_WEB-ITnose" >'  title='<%#Eval("title") %>'  width="95"    style="max-width:90%" /></a>              	 <span><%# TFXK.Common.StrHelper.CutString(Eval("title")+"",18) %></span></li>                         </td> </ItemTemplate>                                </asp:repeater>                            </tr>                        </table>                    </ul>                </div>            </div>

.project{ width:943px; height:190px; background-color:Aqua; float:left; background-image:url(images/zt_73.jpg); background-repeat:no-repeat; background-position:1px top; margin-top:20px; display:inline; padding-left:5px; display:inline;}.project_more{height:25px; text-align:right; padding-top:35px; display:inline; width:925px; float:left;}.project ul li{ float:left; width:120px; height:140px; margin:0px 10px; display:inline;}.project ul li a img{ width:90px; height:110px; padding:2px; border:solid 1px #dadada;}.project ul li span{ width:120px; height:30px; float:left; text-align:center; line-height:30px;}

After adjusting it for a long time, it still didn’t come out. The text under the scrolling image is always displayed on top of the image, and it’s one bit wrong. IE6,7, FF all show normal. (When IE6 displays text, the text is in the correct position, but only half of the text is displayed)
Thank you

Reply to the discussion (solution)

I have not seen anything like this Written:

. . .



. . . .
There is a serious problem with your layout. Either use

(do not apply other elements in the middle)
• , or use table

  to find the cause of the problem. The
  IMAGE element does not have BLOCK set, and the
  SPAN behind it causes problems with its display.
  Restore display:block in IMAGE to normal.
  Alas, it took more than 3 days of research to solve it.

  Solving the problem is a small problem, but your layout is the big problem. . It is recommended to change the layout and develop good habits