Internet Explorer 7中不需要的保证金问题

Internet Explorer 7中存在一个奇怪的问题，它显示的标题与顶部之间有许多距离。其他浏览器或更新版本的IE中不存在该问题。Internet Explorer 7中不需要的保证金问题

我该怎么做才能使它正确？

铬版本：
Most of browsers show what exactly should show!
IE 7版本：
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; }

更新1：我固定它通过给*margin: -20px;到.sidebar-news h3，但我不喜欢我的解决方案！这是为什么发生？有什么增加了这个差距？

来源

2013-05-13 Farid Rn

您是否[首先重置您的css]（http://meyerweb.com/eric/tools/css/reset/）？ – Seza 2013-05-13 17:32:41

是不是支持IE7的一个选项？ – 2013-05-13 17:33:16

@Seza是的，我正在使用'Bootstrap'启用重置选项，并且我正在加载'Modernizr.js' – 2013-05-13 17:34:15

您需要应用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; }

来源

2013-05-13 17:46:23 samshah

给予'float'将使IE7正确，但其他浏览器呈现页面的方式不同，因为图像和标题之后没有浮动文本。 – 2013-05-13 17:48:21

我必须使用'* float：right;'。 – 2013-05-13 17:48:43

@faridv，不要使用黑客！如果您必须支持IE7，请使用IE条件注释来加载特定于IE7的样式表。 – 2013-05-14 09:14:24

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

基本上，我认为最快的修复应该是把float: left;你的“H3”元素

来源

2013-05-13 17:36:51 JacobMcLock

我必须在此上使用正确的浮点数，但会使其他浏览器的页面变差。 – 2013-05-13 17:51:25

较旧的IE与其HasLayout属性有问题。缩放：1，溢出：隐藏，这可能会解决这个问题。 – Seza 2013-05-13 17:55:02

@faridv，据我所知，这可能会对其他浏览器产生负面影响。在这种情况下，将前缀为''float：left;'的'float：left;'用作IE7唯一的CSS破解。这意味着只有IE7才会解析该行。如果你必须这样做，那么请确保你也发表评论，表示这是一个仅限IE7的黑客。他们通常不鼓励，但在这种有限的情况下，我认为这是一个可以接受的解决方案。 – JacobMcLock 2013-05-13 17:59:05

Internet Explorer 7中不需要的保证金问题

回答

相关问题