如何将此 css 应用于将元素文本"`DOG DOG DOG`"移动到"猫"图像的顶部？

Question

如何应用此css将元素文本"DOG DOG DOG"移动到cat图像的顶部？

我用铬测试，可以

http://image.ohozaa.com/i/g53/BwHNe9.png

但是在ie7元素文本DOG DOG DOG中没有移动到顶部cat图像

http://image.ohozaa.com/i/53f/8OqTpZ.png

如何应用css？

<div style=" display: block;
opacity: 1;
color: rgb(255, 255, 255);
width: 80px;
height: 80px;
position: relative;
float: left;
background: #fff;
margin: 7px;">
<div style="
    left: 25px;  top: 13px;  z-index: 999;  opacity: 1;  -webkit-backface-visibility: hidden;  color: #fff;  font-weight: bold;  width: 117px;  text-align: center;  font-size: 12px;  font-family: lato;  padding: 10px 0px;  position: absolute;  margin: 0px;  background-color: rgb(0, 178, 45);  -moz-border-radius: 6px;  -webkit-border-radius: 6px;  border-radius: 6px ;
">
    DOG DOG DOG
</div>
<img src="http://green.uwex.edu/files/2010/06/4-H-Dog.png" width="80" height="80" style=" border: 1px solid rgb(203, 203, 203); ">            
</div>



<div style=" display: block;
opacity: 1;
color: rgb(255, 255, 255);
width: 80px;
height: 80px;
position: relative;
float: left;
background: #fff;
margin: 7px;">
<div style="
    left: 25px;  top: 13px;  z-index: 999;  opacity: 1;  -webkit-backface-visibility: hidden;  color: #fff;  font-weight: bold;  width: 117px;  text-align: center;  font-size: 12px;  font-family: lato;  padding: 10px 0px;  position: absolute;  margin: 0px;  background-color: rgb(0, 178, 45);  -moz-border-radius: 6px;  -webkit-border-radius: 6px;  border-radius: 6px;
">
    CAT CAT CAT
</div>
<img src="http://img1.wikia.nocookie.net/__cb20120908225005/disney/images/thumb/b/b6/Cheshirecatdisney.png/256px-Cheshirecatdisney.png" width="80" height="80" style=" border: 1px solid rgb(203, 203, 203); ">            
</div>

Answer 1

now check work fine in ie 7...  in body tag first div you change the css 

<div style=" display: block;
opacity: 1;
color: rgb(255, 255, 255);
width: 80px;
height: 80px;
position: relative;
*position: absolute; /* for ie 7 only */
float: left;
background: #fff;
margin: 7px;">