问题
I have this nasty rendering issue in IE9 only, IE8 & IE7 works fine as the rest of the browsers.
http://jsfiddle.net/65Zsv/
Open the demo in IE9 and hover over the image. The problem is that in IE9 the text located under the image renders with artifacts.
I was able to resolve the bug by forcing IE9 into IE8 compatibility mode, but still this got stuck in my mind and I am looking for a real resolution.
P.S. I don't have IE10 installed and I wonder if the bug will be there as well...
回答1:
This bug can be resolved by wrapping the text in a block-level tag. Update your fiddle as so and the bug goes away:
<html>
<head></head>
<body>
<div class="itemBtn"><img src="http://a3.mzstatic.com/us/r1000/029/Video/ad/b9/e4/mzi.sporozgs.100x100-75.jpg"><br> <p>IIII THIS IS SOME CRAZY TEXT</p></div></body>
</html>
I don't know the rules about text in the <body> tag, but I think it has to be in a block level element at some point. It's probably more a case of invalid markup than an MS bug.
来源：https://stackoverflow.com/questions/11346385/dynamic-html-rendering-issue-in-ie9-only