问题
The bizarre symptom I'm seeing on this page (only when viewing with IE 6) is that the text of the <h1> tag is invisible when the page is loaded or resized, but appears when I mouse over the region where it appears in the upper-left corner. I haven't seen this with any other browser, and the only CSS attributes I'm modifying for any h1 tag are these:
- font-size
- font-weight
- margin, margin-top
- padding, padding-top, padding-bottom
Nowhere do I change visible or display, and there are no hover effects for the h1. Even the non-link text inside the header disappears. Any ideas?
回答1:
Agreeing with John's post. I have (by sheer luck) been able to circumvent this debugging process on occasion by giving the element position: relative or position: static rules.
So you may want to cross your fingers and give that a whirl before going down John's route.
回答2:
More than likely this is being caused by another styled element on the page.
I think your best option is trial and error... Removing all styles from the page, verifying the h1 element is no longer disappearing, and then re-adding the other styles until you've found the culprit
回答3:
I didn't see anything blatantly obvious but you do have rgba being applied via an hover.
#header #info a:hover, #header #info h2#pathlinks a:hover {
background-color: rgba(63,63,63,0.35);
}
Also, this works locally with my IE6 so I'm not sure if maybe it behaves differently due to the associated zone in Internet Explorer (intranet, trusted, Internet).
I wholeheartedly agree with the other posters that this will be an exercise in debugging. I like John's technique of trial and error.
回答4:
Although I don't see a hasLayout attribute listed for the heading, you may want to try adding zoom:1; to the h1 and see what results you get. This made the text visible for me consistently when testing.
Indeed this problem seems pretty bizarre.
来源：https://stackoverflow.com/questions/1323947/content-of-h1-tag-is-invisible-until-moused-over-in-ie-6