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

【问题标题】：Unwanted margin issue in Internet Explorer 7Internet Explorer 7 中不需要的边距问题
【发布时间】：2013-05-14 01:46:23
【问题描述】：

我在 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 来修复它，但我不喜欢我的解决方案！为什么会这样？有什么东西增加了这个差距吗？

【问题讨论】：

你先reset your css了吗？
不支持 IE7 是不是一个选项？
@Seza 是的，我正在使用 Bootstrap 并启用了重置选项，并且我正在加载 Modernizr.js
@DerekHenderson 这不是一个选项，太多人仍在使用它，我必须在我的代码中支持它。
@faridv 我不能提供任何您可能还不知道的明智建议，但我要向您的雇主指出，IE7 存在零日漏洞，这可能会使他的计算机完全容易受到被超车并随时可以获取他或她的所有信息；更不用说它可能从网络中累积的任何不安全数据。在工作场所使用 IE7 的影响是非常负面的，并且来自在该领域工作了很长时间的人，我会敦促您的雇主从 IE7 更改。

标签： css internet-explorer internet-explorer-7

【解决方案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; }

【讨论】：

给出float 将使其在IE7 中正确，但其他浏览器呈现页面的方式不同，因为图像和标题后没有浮动文本。
@faridv，不要使用黑客！如果您必须支持 IE7，请使用 IE 条件 cmets 加载特定于 IE7 的样式表。

【解决方案2】：

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

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

【讨论】：

我必须在上面使用正确的浮动，但这会使页面在其他浏览器中变得更糟。
旧 IE 的 HasLayout 属性存在问题。 Zoom:1、overflow:hidden 等可能会解决此问题。
@faridv，我知道这可能会对其他浏览器产生负面影响。在这种情况下，将前面带有星号的float: left; 应用为*float: left;，这是一个仅限IE7 的CSS hack。这意味着只有 IE7 会解析该行。如果您必须这样做，请确保您还留下评论，表明它是仅限 IE7 的黑客。通常不鼓励他们，但在这种有限的情况下，我认为这是一个可以接受的解决方案。
@JacobMcLock 当我评论“samshah”时，我必须使用*float，但我正在寻找一种解决方案来保持我的 css 文件可验证。
@faridv，好的，我明白了。在这种情况下，这是一个不幸的要求。除非您可以发布实时示例，否则任何其他修复它都只是猜测。当您不使用'*'时，在其他浏览器中会发生什么负面后果？或者你可以试试position: relative; top: 0;？