0

I have a weird problem in Internet Explorer 7 which shows heading with a lot of distance from the top. The problem does not exists in other browsers or newer versions of IE.

What should I do to make it right?

Chrome Version:
Most of browsers show what exactly should show!
IE 7 Version:
IE puts some space above the title.

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

Update 1: I fixed it by giving *margin: -20px; to .sidebar-news h3 but I don't like my solution! Why is this happening? Is there something adding that gap?

4

2 回答 2

1

您需要在 IE7 中应用 float 属性来实现这一点。

.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; }
于 2013-05-13T17:46:23.623 回答
1

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

基本上，我认为最快的解决方法应该是穿上float: left;你的“h3”元素

于 2013-05-13T17:36:51.797 回答