CSS3无法在我的网站上的IE中运行

Question

I am having a real hard time developing for Internet Explorer.

Below is a snapshot of a project as it appears in IE9 and below that in Google Chrome it looks the same in Firefox as well.

Some of the things not working correctly in IE9 on this page...

• The navigation bar, the links are stuck at the top in IE instead of vertically centered
• The navigation bar does not have the box shadow applied in IE
• The sidebar and content boxes do not have either the shadow or beveled corners in IE
• The Tag boxes do not have the round edges in IE
• In the content section, notice the 2 tags "CSS" and "FONTS" on the right side of page are pushed down, in the Chrome version they are aligned.

The project is not online so I can't show it but I have put the header section into a JSSFiddle page here http://jsfiddle.net/kenLs/3/embedded/result/ you can see that this JSFiddle of the header DOES work correctly in IE9.

That really has me confused, it works on JSFiddle but not on my site. I have looked at everything I can think of to make it work correctly. I even added <meta http-equiv="X-UA-Compatible" content="IE=9" /> to my header. I had some HTLM5 elements on my page but I replaced all them with regular div's just to test with IE, nothing I do seems to change any of these problems.

IE9 snapshot

Chrome snapshot

---

I know this is hard to debug since the project is not online but if you have any ideas why this may be happening I would really love to know.

---

UPDATE

I just realized that on that JSFiddle, if I turn off Compatibility view then even the header will look like the one in my image

I also added another simple JSFiddle test that just has the code for my tags, even this little code does not work correctly in IE, I have to hit the compatibility mode for it to work otherwise the corners are square http://jsfiddle.net/j9Qe3/1/

Answer 1

如果它可以在jsfiddle中运行，但不能在您的站点上运行，我想知道您是在使用doctype还是在doctype之前放置了任何东西，这会使IE进入怪癖模式。