Question

我的网站http://www.warrenhowden.com的目标网页仅在IE和Chrome上显示页面的下半部分。 Safari＆amp; FF似乎加载它很好。任何建议都将非常感谢！

以下是代码：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Warren Howden - Music</title>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link href="warrenhowden.css" rel="stylesheet" type="text/css" />
</head>

<body id="page-home" style="width:99%; background-color:black; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; font-size:1.7em; font-weight:bold; text-shadow: -1px 0 0.2em blue, 0 1px 0.2em blue, 1px 0 0.2em blue, 0 -1px 0.2em red; border:0; margin-bottom:0; padding:0;">
<div style="position:absolute;">
<img src="images/landingpage.jpg" alt="Welcome to Warren Howden's Music" style="max-width:100%; min-width:100%; z-index:-1; border:0;margin-left:auto; margin-right:auto;"/>
<a style="position:absolute; top:12%; left:18%;" href="read.php" title="life &amp; influences">READ</a>
<a style="position:absolute; top:12%; left:47%;" href="look.php" title="pictures">LOOK</a>
<a style="position:absolute; top:12%; left:74%;" href="listen.php" title="tunes">LISTEN</a>
<a style="position:absolute; top:47%; left:17%;" href="watch.php" title="video clips">WATCH</a>
<a style="position:absolute; left:40%; width:20%;" id="centretext" href="#"><span style="font-family:'Alice', serif;">WARREN&nbsp;HOWDEN<br />
</span><span style="font-family:'FrancoisOne', sans-serif; font-size:1.3em; letter-spacing:4px; text-decoration:overline; padding-left:3px;">FLUTEBOXING</span></a>
<a style="position:absolute; top:47%; left:76%;" href="see.php" title="catch Warren live">SEE</a>
<a style="position:absolute; top:84%; left:14%;" href="soundtracks.php" title="other projects">SOUNDTRACKS</a>
<a style="position:absolute; top:84%; left:47%;" href="links.php" title="cool stuff">LINKS</a>
<a style="position:absolute; top:84%; left:73%;" href="contact.php" title="email, newsletter">CONTACT</a>
</div> 
</body>
</html>

Answer 1

我在body#page-home的css中看到有一个属性margin-bottom:0;。您需要将其更改为margin:auto;。就是这样，它在Chrome上运行良好。

Answer 2

添加此css规则

body{
margin:0
}

所有浏览器都有默认的边距和填充，当你想使用css时你应该写或使用css reset - 例如：

*{
padding:0;
margin:0;
border:none;
}

或者您可以下载现有的css重置文件。

主页在chrome＆amp;上显示不正确即;在野生动物园和火狐

2 个答案: