Why does my site look like garbage in IE?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Davey Whitney</title>
<link re开发者_开发百科l="shortcut icon" href="http://daveywhitney.com/images/favicon.ico" />
<script src="js/jquery.js" type="text/javascript"><!--mce:0--></script>
<script src="js/jquery.lightbox-0.5.min.js" type="text/javascript"><!--mce:1--></script>
<script src="js/jquery.jparallax.js" type="text/javascript"><!--mce:2--></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<meta name="keywords" content="Davey Whitney,Davey,Whitney,Web Designer,Web Design,Web Development,Web" />
<meta name="description" content="Davey Whitney - Web Developer and so much more..." />
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#parallax')
.animate(
{duration: '2000', easing: 'easeInSine'
})
.jparallax({yparallax:false},{xtravel: '100%'},{xtravel: '300px'});
});
</script>
</head>
<body bgcolor="#ffffff">
<div id="wrapper">
<div id="icons">
<a href="mailto:davey@daveywhitney.com" target="_blank">
<img src="http://daveywhitney.com/images/gmail.png" border="0" />
</a>
<a href="http://www.linkedin.com/pub/davey-whitney/15/a15/86a" target="_blank">
<img src="http://daveywhitney.com/images/linkedin.png" border="0" />
</a>
<a href="http://twitter.com/daveywhitney" target="_blank">
<img src="http://daveywhitney.com/images/twitter.png" border="0" />
</a>
<a href="http://www.facebook.com/home.php?#/profile.php?ref=profile&id=13810754" target="_blank">
<img src="http://daveywhitney.com/images/facebook.png" border="0" />
</a>
</div>
<div id="copyright">
© <a href="mailto:davey@daveywhitney.com" target="_blank">Davey Whitney</a>
</div>
<div id="parallax">
<img style="width: 61px;" src="http://daveywhitney.com/images/merun.png" alt="" />
</div>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-12009950-2");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
css
#wrapper {
width:1200px;
}
#icons {
padding:100px 0 0 0;
margin:0 auto;
width:530px;
border:0;
}
#copyright {
width:150px;
margin:50px auto;
}
#copyright a:link {
color: #3F7BCA;
}
#copyright a:hover {
color: #F28900;
}
a {
text-decoration:none;
}
#parallax
{
position:relative;
overflow:hidden;
width:100%;
height:98px;
border:none;
margin:0 auto 20px auto;
padding-top: 30px;
}
Here is the site: http://daveywhitney.com/
It's because it's rendering in quirks mode - IE doesn't like anything before the DOCTYPE. Remove the comment and it should render in standards mode (his live site contained a large comment before the DOCTYPE which isn't visible in the question).
From Wikipedia:
Quirks mode in any version of IE will also be triggered if anything but whitespace precedes the DOCTYPE. For example, if a hypertext document contains a comment or any tag before the DOCTYPE, IE will use quirks mode:
<!-- This comment will put IE 6, 7 and 8 in quirks mode --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
If you are talking about IE6, then it is because IE6 is an outdated browser that doesn't support many common html and css tools.
Because IE is obviously garbage...IE6 at least, IE8 is pretty good. Make sure you aren't using any CSS3 features, Opera is the only one that supports most of that. Also, validate your page, if you fix the issues it finds, most of your problems will probably be resolved.
加载中,请稍侯......
精彩评论