Question

我有一些跨浏览器定位问题。我有一个简短的生物元素，我希望.bio_name元素可以覆盖图像。使用下面的样式，我已经在所有流行的浏览器（Adobe的Browserlab中使用的浏览器）中工作，除了Safari 4.0和IE 7（在IE 8中它工作得很好）。从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
}

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

1 个答案: