Internet Explorer 7에서 원하지 않는 여백 문제가 발생했습니다.

Question

인터넷 익스플로러 7에서 이상한 거리를 보입니다. 이 문제는 다른 브라우저 나 최신 버전의 IE에는 존재하지 않습니다.

제대로하려면 어떻게해야합니까?

크롬 버전 :

IE 7 버전 :

HTML

<div class="box"> 
    <header class="module-title"> 
     <h2 class="title">گزارش و مصاحبه</h2> 
    </header> 
    <section class="module-content"> 
     <ul class="sidebar-news"> 
      <li> 
       <div class="image-holder"> 
        <img src="img.jpg" alt="Test item"> 
       </div> 
       <h3><a class="moduleItemTitle" href="#">Copy of مصاحبه با معاون صدا درباره راديو كتاب</a></h3> 
       . 
       . 
       . 

      </li> 
     </ul> 
    </section> 
</div> 

CSS

.module-title h2 { margin-top: 0; font-size: 26px; line-height: 30px; } 
.sidebar-news { list-style: none; margin: 0; } 
.sidebar-news h3 { font-size: 20px; line-height: 26px; margin-top: 0; } 
.sidebar-news .image-holder { width: 140px; float: right; margin-left: 10px; } 

업데이트 1 : 나는 .sidebar-news h3-*margin: -20px;을 제공하여 고정하지만 난 내 솔루션을 좋아하지 않아! 왜 이런 일이 일어나는 걸까요? 그 격차를 더하는 것이 있습니까?

Answer 1

당신은 IE7에서 이것을 달성하기 위해 플로트 속성을 적용 할 필요가 당신의 "H3"요소에 float: left;을 넣어해야한다고 생각 .

.module-title h2 { margin-top: 0; font-size: 26px; line-height: 30px; } 
.sidebar-news { list-style: none; margin: 0; border:1px solid red; float:left; } 
.sidebar-news .image-holder{ float:right;} 
.sidebar-news h3 { font-size: 20px; line-height: 26px; margin:0px; padding:0px; float:left; } 
.sidebar-news .image-holder { width: 140px; float: right; margin-left: 10px; } 

Answer 2

볼이 목록에 # 2 : 기본적으로 http://net.tutsplus.com/tutorials/html-css-techniques/9-most-common-ie-bugs-and-how-to-fix-them/

, 나는 가장 빠른 수정