IE7 텍스트 정렬 문제 - 텍스트 줄 바꿈 및하지 않아야 함

Question

http://wilwaldon.com/ie7sucks/inner7ie.html을 IE7과 함께 보시면 텍스트가 이미지를 감싸는 것을 볼 수 있습니다. 다른 모든 브라우저에서는 그렇지 않습니다. 나는 그것이 IE7에서 이미지를 포장하지 않기를 바란다. 나는 ie dev 도구를 사용했지만 결함의 원인을 파악할 수는 없습니다.

도움을 주시면 감사하겠습니다. 영원히 감사 드리겠습니다.

고맙습니다.

Answer 1

나를 감싸는 것처럼 보이지 않습니다. 줄 바꿈은 한 단락이 이미지 주위를 감싸는 곳입니다. 여기서 일어나는 일은 2 단락을 가지고 있는데 첫 번째 단락은 이미지보다 길기 때문에 아래 단락을 이미지 아래로 밀었습니다.

첫 번째 단락의 크기를 두 배로 늘려 Firefox와 IE7 모두에서 줄 바꿈을 시도하십시오. 나는 아마 그렇게하지 않을 것이라고 생각한다.

따라서 문제는 당신이 .mainright의 모든 단락에 아래쪽 패딩을 가지고 있다는 것입니다. 파이어 폭스는이 패딩을 단락의 높이에 포함시키는 반면, IE7은 부정확하게 하단에 추가합니다. 이것은 Firefox에서 첫 번째 단락은 IE7에서 두 번째 단락을 이미지 아래로 밀어 넣을만큼 길지 않다는 것을 의미합니다.

Firefox가 원하는대로 표시되는 경우이 아래쪽 패딩을 제거하십시오.

.featuredbold, .spotlightbox {margin-bottom:36px;} 

UPDATE : 당신이 추천 헤더와 스포트라이트 이미지 사이의 간격을 유지하려면 그런 다음, 다음을 추가

: 동적 콘텐츠를 수용하기 위해 다음의 일을해야 할 것 1) 상자 당 한 단락을 사용하고 <br /><br />을 사용하여 단락 나누기를 시뮬레이션합니다.

2) 모든 단락을 div에 넣고 내용을 생성하는 모든 것이 해당 div의 클래스를 변경하게하십시오. 예를 들어 클래스에 ".fat"및 ".thin"을 지정한 다음 해당 폭을 해당 클래스와 연결하여 단락이 div로 제한 될 때 줄 바꿈을하지 못하게 할 수 있습니다. div를 오른쪽으로 띄워야합니다.

솔루션 2가 훨씬 좋지만 설정에 따라 구현할 수 없을 수도 있습니다.

Answer 2

제거하거나 다시 설정하십시오. #mainright p {padding-bottom:36px;}.

또한 유효성 검사 오류가 있습니다. 당신의 P-태그를 테이블 행 그룹을 설정하여

는

No versions of Internet Explorer (including IE8) support the property values 
"inline-table", "run-in", "table", "table-caption", "table-cell", 
"table-column", "table-column-group", "table-row", or "table-row-group". 

Answer 3

http://www.w3schools.com/css/pr_class_display.asp, 더 이상 패딩 바닥을,하지만 IE는 않습니다.

코드 구조가 잘못되었습니다. 다음과 같은 것이 필요합니다.

<div class="spotlightbox"> 
    <img style="float: left"> 
    <div style="float: left">Text here</div> 
    <div style="clear: both;"></div> 
</div>