Internet Explorer 7中的不需要的边距问题

Question

我在Internet Explorer 7中遇到一个奇怪的问题，它显示距离顶部很远的标题。其他浏览器或IE的新版本中不存在该问题。

我该怎么做才能做到正确？

Chrome版本：

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：我通过向*margin: -20px;提供.sidebar-news h3来修复它，但我不喜欢我的解决方案！为什么会这样？是否存在增加这种差距的因素？

Answer 1

请参阅此列表中的＃2： http://net.tutsplus.com/tutorials/html-css-techniques/9-most-common-ie-bugs-and-how-to-fix-them/

基本上，我认为最快的解决方法是将float: left;放在你的＆＃34; h3＆＃34;元件

Answer 2

您需要应用float属性才能在IE7中实现此目的。

.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; }