1

My page looks great in safari, chrome, ff, and degrades gracefully in IE8, but my client requires IE7 as well.

The one little thing that isnt' working is my H3. Strangely, my H2 works fine. It's not a matter of losing style, which seems to be a more common issue seen; the H3 just doesn't show up at all! I've researched this a good bit and tried many things I've seen recommended for missing styles (including the zoom:1), but I haven't been able to fix this issue. My best guess is it has something to do with the nested divs...

I've also tried various doctypes, to no avail...including:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

<!DOCTYPE html>

Here's my fiddle (with more complete code), along with a portion below: http://jsfiddle.net/cathi/2Kkh2/18/ (of course it seems to work fine here - can't bring up jsfiddle on the machine with IE7 here. hmm...)

h2 {
    color:#007cc0; 
    font-size:1.4em;
    line-height:1.9em;
    font-family:'Tahoma',Helvetica,Arial,sans-serif;
    margin-top:0;
    margin-bottom:10px;
    padding-top:0;
    padding-left: 35px;
    padding-right: 8px;
    padding-bottom:0;
    font-weight:normal;
}

h3 {
    color:#ea752e; 
    font-size:1.4em;
    line-height:1.9em;
    font-family:'Tahoma',Helvetica,Arial,sans-serif;
    margin-top:0;
    margin-bottom:0px;
    padding-top:0;
    padding-left: 35px;
    padding-right: 8px;
    padding-bottom:0;
    font-weight:normal;
}

and, the html (copying some, but not nec all of the divs)

<div class="content-intro">
  <h2>Here is my H2 that shows up fine in IE7</h2>
<p>A paragraph of intro copy here</p>
</div>
<div class="content-checklists">

This is my H3 that is not showing up in IE7

4

1 回答 1

1

您看到这种奇怪行为的原因是 IE7 偶尔（或者我应该经常说？）在涉及浮点数时处理值的错误方式。最终，您<h3>被推到图标图像下方，并且由于overflow:hidden父级上有一个，因此该元素不会显示（除非您以某种方式在其父级中向下滚动）。

在您的定义中.content-checklists-title，尝试删除您的width:97%.

这仍然会在其他浏览器中产生所需的行为（感谢文本在浮动元素周围流动的方式），但也将避免 IE7 的有趣怪癖。

我希望这就是你要找的！如果没有，请告诉我，我很乐意尝试进一步提供帮助！

于 2013-07-24T16:06:32.323 回答