파이어 폭스에서의 이상한 플로트 동작

Question

우선이 질문은 이미 있지만 이미 나에게는 찾아 볼 수 없으므로 나에게 가보지 마십시오. 그냥 제게 지시 해주세요.

css float는 firefox에서는 이상하지만 다른 브라우저에서는 작동하지 않습니다. 뉴스 피드의 이미지가 왼쪽으로 떠 있도록해야 옆의 텍스트가 맨 아래가 아닌 이미지의 맨 위에 표시됩니다. 파이어 폭스에서 이미지가 플로트되면 내부 버블이 이미지를 지우지 않고 바깥 쪽 버블로 아무 것도 지워지지 않습니다.

#news {width:99.2%; background-color:#E9F7FE; border-radius:0.2em; padding:5px; position:relative; margin-bottom:10px} 
.picture {width:70px;overflow:hidden; margin-right:5px; border-radius:0.2em; display:inline-block; float:left;} 
.bubble {float:left; padding:5px;border-radius:0.2em; background-color:#E9F7FE; margin-bottom:5px; margin-right:10px; width:33.3%; margin-bottom:10px; } 
.innerbubble {position:relative; background-color:white; border-radius:0.2em; padding:5px;} 
#probwarn {border-radius:0.2em; background-color:#E9F7FE; text-align:center; margin-top:5px; width:100%; margin-bottom:5px; float:right;} 

그리고 마크 업 : 여기에

는 CSS입니다

<h1>Latest News:</h1> 

<div class="innerbubble"> 

<a href="index.html"><div class="picture"><img src=" 
http://newbornsounds.co.uk/artistspictures/Not%20by%20design/Andy%20Evans%20logo%205.jpg" width="100%" alt="NewBorn Sounds" > 

</div> 

News: Not By Design<br></a> 

<hr> 

<div class="picture"><img src=" 
    ../imageuploads/13396991365_277695398952342_104081122980438_707146_2014948057_n.jpg" width="100%" alt="NewBorn Sounds" > 

</div> 

<a href="JacobWindsor">New Artist: Jacob Windsor<br></a><hr><a href="JacobWindsor/gigs"> 

<div class="picture"><img src="  ../imageuploads/13396991365_277695398952342_104081122980438_707146_2014948057_n.jpg"  width="100%" alt="NewBorn Sounds" > 

</div> 

New Gig: a from Jacob Windsor</a><br><hr></div></div> 

나는 마크 업이 조금 읽기 어려운이 아니라 잘 포맷 된 것을 죄송합니다. 그것은 PHP로 작성된 그래서 조금 이상한왔다.

당신은 당신의 인생을 더 쉽게 만들 것입니다 HTML과 CSS를 단순화 할 수

Answer 1

난 당신이 요구하는지 이해 해요 경우, hr {clear:both;}이 문제를 해결해야한다 . 그러면 <hr>이 항상 페이지 전체에 닿아 플로팅 된 이미지 아래로 이동하므로 이미지가 서로 겹치지 않게됩니다 (하지만 텍스트는 여전히 위쪽에 표시됩니다). 해당 이미지).

jsFiddle : http://jsfiddle.net/ZWvCX/1/

hr {clear:left;}는 특정 문제 설명 해결하기 위해 실제로 충분하지만, <hr>가 양방향으로 취소하는 것은 단지 적절한 것 같다.

Answer 2

, 나는 당신을 위해 바이올린을 만들고 그래서 여기 한 : http://jsfiddle.net/P93Ta/1/