图片文本对齐，跨浏览器兼容性问题

Question

我遇到了一些跨浏览器定位问题。我有一个简短的 bio 元素，我希望 .bio_name 元素覆盖图像。使用下面的样式，除了 Safari 4.0 和 IE 7（在 IE 8 中它工作得很好）之外，我已经让它在所有流行的浏览器（Adobe 的 Browserlab 中使用的那些）中工作。从 Safari 3 到 Safari 4/IE 7 t0 IE 8 发生了什么变化？

Example of error

我有这样的结构：

<div id="some_id" class="bio">  
<h3>  
<img src="http://www.hello.com/some.jpg" alt="blah" />  
<a name="person"></a>  
</h3>  
<div class="bio_info">  
<h3 class="bio_name">First Last</h3>  
blah  
<div class="add_bio">blah more</div>  
</div>  
<span class="add_bio_toggle">more</span>  
</div>  

它的样式是这样的：

 .bio{    
   position: relative;  
   min-height: 175px;  
   }  

.bio img{  
   float: left;  
   margin-right: 10px;  
   width: 160px;  
   height: 143px;  
   vertical-align:text-top;  
   margin-top:10px; align:left;  
   }  

  .bio_info{  
   margin-top: -40px;  
   }  

.bio_info h3{  
   line-height: -1px;    
   margin-top: 7px;  
   }  

.add_bio_toggle{  
   display: block;   
   cursor: pointer;  
   color: blue;  
   } 

Answer 1

您创建这些“生物元素”的方式并不理想。

试试这个：

Live Demo (edit)

在 IE7/8、Firefox、Chrome、Opera、Safari 之间看起来一致。

HTML：

<a name="person">
<div id="some_id" class="bio">
    <h3 class="bio_name">First Last First Last First Last First Last</h3> 
    <div class="add_bio">
        <img src="http://www.google.com/images/logos/ps_logo2.png" alt="blah" /> 
        <div>
            blah more
            <span class="add_bio_toggle">more</span>
        </div>
    </div>
</div>

CSS：

.add_bio {
    background: #ccc;
    overflow: auto
}
.add_bio div {
    margin-left: 170px
}
.bio {
    margin-bottom: 16px
}
.bio img {  
   float: left;  
   width: 160px;  
   height: 143px;  
   margin: 10px 0 0 0;
   border: 1px solid red
}
.add_bio_toggle {
    display: block;
    margin: 12px 0 0 0
}