이미지 텍스트 정렬, 브라우저 간 호환성 질문

Question

크로스 브라우저 위치 확인 문제가 있습니다. 짧은 바이오 요소가 있고 .bio_name 요소가 이미지 위에 오길 원합니다. 아래의 스타일을 사용하여 Safari 4.0 및 Internet Explorer 7 (Internet Explorer 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, 파이어 폭스, 크롬, 오페라, 사파리 사이의 일관성을 보인다.

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 
}