网站在Mac上看起来与PC不同（使用相同的浏览器）

Question

无论出于何种原因，我网站上的各种元素在Mac上看起来与在PC上完全不同。有些人在错误的地方，有些人根本没有出现。

我已经验证并仔细检查了我的HTML和CSS，似乎无法识别问题。 Here is a link to screenshots of the site using several major browsers on both Mac and PC。 （Chrome上的PC显示了网站外观的最准确描述。）

以下是屏幕截图中显示的网页的CSS和HTML：

/* Font reference for IE */
@font-face {
	font-family: "Font Awesome";
	src: url('../fonts/fontawesome-webfont.eot')
}

@font-face {
	font-family: 'Gotham';
	src: url('../fonts/gotham-bold.eot')
}

@font-face {
	font-family: 'Gotham Ultra';
	src: url('../fonts/gotham-ultra.eot')
}

@font-face {
	font-family: Din;
	src: url('../fonts/din-regular.eot')
}

@font-face {
	font-family: "Din Bold";
	src: url('../fonts/din-bold.eot')
}

/* Font reference for most other browsers */
@font-face {
	font-family: "Font Awesome";
	src: url('../fonts/fontawesome-webfont.woff')
}

@font-face {
	font-family: 'Gotham';
	src: url('../fonts/gotham-bold.woff')
}

@font-face {
	font-family: 'Gotham Ultra';
	src: url('../fonts/gotham-ultra.woff')
}

@font-face {
	font-family: Din;
	src: url('../fonts/din-regular.ttf')
}

@font-face {
	font-family: "Din Bold";
	src: url('../fonts/din-bold.ttf')
}

body { margin: 0px; background-color: #d5d5d5; height: 100%; font-family: Din, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; display: block; }

#pageTop {
	display: block;
	background-color:#FFFFFF;
	height:60px;
	border-bottom:#ffd800 2px solid;
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
}

/* Logo styling */
#pageTopLogo {
	display: inline;
	position: absolute;
	z-index: 1;
	left: 50%;
	margin-left: -135px;
}

#pageTopLogo > a {
	margin: auto;
}

/* Nav bar styling */
#pageTop > #navBar {
	float:left;
	display: inline;
}

#pageTop > #navBar > ul {
	position: absolute;
	z-index: 0;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

#pageTop > #navBar > ul > li {
	float: left;
	display: inline;
	margin-top: 22px;
}

#pageTop > #navBar > ul > li > a {
	text-decoration: none;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-size: 14px;
	color: #b0b0b0;
	/*border: #FF0004 1px dashed;*/
	padding: 22px 35px;
}

#pageTop > #navBar > ul > li > a:hover {
	color: #ffd800;
}

#pageTop ul {
	list-style-type: none;
}

#pageTop a {
	text-decoration: none;
}

#become {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-size: 14px;
	color: #b0b0b0;
	/*border: #FF0004 1px dashed;*/
	padding: 22px 35px;
}

#become:hover {
	color: #ffd800;
}

/* Sign in styling */
#signinBar {
	float:right;
	display: inline;
}

#signinBar > ul {
	z-index: 0;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

#signinBar > ul > li {
	float: left;
	display: inline;
	margin-top: 22px;
}

#signinButton {
	margin: 0 20px;
	background-color: #ffd800;
	border-radius: 5px;
	padding: 8px 0px;
	box-shadow: 0px 1px 0px #ceae00;
	text-decoration: none;
}

#signinButton:hover {
	background-color: #ffe242;
}

#signinText {
	text-decoration: none;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-size: 14px;
	color: #FFFFFF;
	padding: 8px 20px;
	text-shadow: 0px -1px 0px #ceae00;
}

#wrapper {
	height: 100%;
}

#content {
	margin-top: 62px;
	display: block;
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50px;
}

#footer {
	display: block;
	position: absolute;
	height: 100px;
	background-color: white;
	border-top: #ffd800 2px solid;
	bottom: 0;
	width: 100%;
}

#footerContent {
	width: 1000px;
	margin: 10px auto;
}

#footer_copyright {
	float: left;
	font-size: 14px;
	font-weight: 500;
	margin-top: 0px;
	clear: both;
	color: #b0b0b0;
}

#logo_small {
	float: left;
	width: 160px;
	height: auto;
}

#LLC {
	font-size: 12px;
	font-weight: bold;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	float: left;
	margin-top: 15px;
	margin-left: 5px;
	color: #ffd800;
}

#footerHelp {
	list-style: none;
	margin-left: 150px;
	margin-top: -32px;
	float: left;
}

#footerContent > ul {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: bold;
	color: #808080;
}

#footerExplore_col1 {
	list-style: none;
	float: left;
	margin-top: -32px;
	margin-left: 15px;
}

#footerExplore_col2 {
	list-style: none;
	float: left;
	margin-top: -32px;
	margin-left: -15px;
}

#footerExplore_col3 {
	list-style: none;
	float: left;
	margin-top: -32px;
	margin-left: -15px;
}

#footerExplore_col4 {
	list-style: none;
	float: left;
	margin-top: -32px;
	margin-left: -15px;
}

#footerContent > ul > li > a {
	text-decoration: none;
	color: #b0b0b0;
	font-family: Din, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: normal;
}

#footerContent > ul > li > a:hover {
	text-decoration: none;
	color: #ffd800;
}

#footerSocial {
	list-style: none;
	float: right;
	margin-top: -32px;
}

#footerSocialHeader {
	margin-bottom: 15px;
}

.socialIcons {
	float: right;
	margin-left: 10px;
}

.usericonsmall {
	border-radius: 50%;
	margin: -10px 20px;
}

#signupbox {
	background-color: white;
	padding: 10px;
	margin-top: 73px;
	margin-left: auto;
	margin-right: auto;
	width: 350px;
	border-radius: 5px;
	box-shadow: 0px 2px 0px #c5c5c5;
	text-align: center;
}

#signupform{
	margin-top:20px;
	margin-left: auto;
	margin-right: auto;	
	width: 220px;
	text-align: left;
}

.inputheader {
	margin-top: 12px;
	margin-bottom: 5px;	
	text-align:left;
	font-weight: bold;
}

.inputheader > span {
	color: #808080;
}

.textinput {
	height: 20px;
	width: 220px;
}

input[type="password"] {
	margin-bottom: 15px;
}

#signupform > input[type="text"] {
	font-family: Din, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
}

#signupform > input[type="password"] {
	font-family: Din, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
}

#signupform > input,select,option {
	font-family: Din, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
}

#signupform > input,select {
	width: 200px;
	padding: 3px;
	background: #FFFFFF;
}

#signupform > input[type=text], textarea {
  -webkit-transition: all 0.20s ease-in-out;
  -moz-transition: all 0.20s ease-in-out;
  -ms-transition: all 0.20s ease-in-out;
  -o-transition: all 0.20s ease-in-out;
  outline: none;
  border: 1px solid #DDDDDD;
}
 
#signupform > input[type=text]:focus, textarea:focus {
  box-shadow: 0 0 5px #ffd800;
  border: 1px solid #ffd800;
}

#signupform > input[type=password], textarea {
  -webkit-transition: all 0.20s ease-in-out;
  -moz-transition: all 0.20s ease-in-out;
  -ms-transition: all 0.20s ease-in-out;
  -o-transition: all 0.20s ease-in-out;
  outline: none;
  border: 1px solid #DDDDDD;
}
 
#signupform > input[type=password]:focus, textarea:focus {
  box-shadow: 0 0 5px #ffd800;
  border: 1px solid #ffd800;
}

#loginbtn {
	font-size:18px;
	width: 220px;
	height: 30px;
	background-color: #ffd800;
	cursor: pointer;
	border-radius: 5px;
	padding-top: 10px;
	padding-bottom: 5px;
	box-shadow: 0px 1px 0px #ceae00;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
}

#loginbtn > span {
	margin-top: 20px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: bold;
	color: white;
	text-shadow: 0px -1px 0px #ceae00;
}

#loginbtn:hover {
	background-color: #ffe242;
}

#signupheader {
	text-align: center;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-size: 20px;
	color: #808080;
}

#forgotpass {
	margin-bottom: 20px;
}

label {
	cursor: pointer;
	display: none;
}

#stayloggedtext {
	color: #808080;
}

input[type="checkbox"] {
	display: none;
}

input[type="checkbox"] + #stayloggedtext:before {
	content: "\f096";
	color: #808080;
	font-family: "Font Awesome";
	speak: none;
	font-size: 14px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	width: 1em;
	margin-right: 5px;
}

input[type="checkbox"]:checked + #stayloggedtext:before {
	content: "\f14a";
	color: #ffd800;
	font-size: 13px;
}

#divider {
	height: 1px;
	background-color: #b0b0b0;
	width: 250px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 20px;
}

#signup {
	color: #808080;
}

#signup > a {
	color: #3c9bcd;
	font-weight: bold;
	text-decoration: none;
}

#signup > a:hover {
	text-decoration: underline;
}

#forgotpass {
	color: #808080;
}

#forgotpass > a {
	color: #3c9bcd;
	font-weight: bold;
	text-decoration: none;
}

#forgotpass > a:hover {
	text-decoration: underline;
}

#submit {
	display: none;
	position: absolute;
	visibility: hidden;
}

<html lang="en"><head>
<meta charset="utf-8">
<title>Log In - Competifund</title>
<link rel="icon" type="image/png" href="favicon.png">
<link rel="stylesheet" type="text/css" href="style/style.css">
<script src="js/main.js"></script>
<script src="js/ajax.js"></script>
<script>
function emptyElement(x){
	_(x).innerHTML = "";
}
function login(){
	var e = _("email").value;
	var p = _("password").value;
	if(e == "" || p == ""){
		_("status").innerHTML = "<strong style='color:#f00'>Please complete all fields.</strong><br />";
	} else {
		_("loginbtn").style.display = "none";
		_("status").innerHTML = '<strong style="color:#808080">...</strong><br><br>';
		var ajax = ajaxObj("POST", "login.php");
        ajax.onreadystatechange = function() {
	        if(ajaxReturn(ajax) == true) {
	            if(ajax.responseText == "login_failed"){
					_("status").innerHTML = "<strong style='color:#f00'>Log in failed. Please try again.</strong><br />";
					_("loginbtn").style.display = "block";
				} else if(ajax.responseText == "$p"){
					_("status").innerHTML = "<strong style='color:#f00'>$p</strong><br />";
					_("loginbtn").style.display = "block";
				} else {
					window.location = "user.php?u="+ajax.responseText;
				}
	        }
        }
        ajax.send("e="+e+"&p="+p);
	}
}
</script>
</head>

<body>
<div id="wrapper">

<div id="pageTop">
	<div id="navBar">
    	<ul>
        	<li><a href="#">How It Works</a></li>
            <li><a href="#">Explore</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
    
	<div id="pageTopLogo">
    	<a href="home.php"><img src="http://competifund.com/images/logo_center.png" alt="competifund_logo" id="logo" title="Competifund Home"></a>
	</div>
    
    <div id="signinBar">
    	<ul>
        	<li>
            	<a href="#" id="become">Become a Creator</a>            </li>
            <li>
            	<a href="login.php" id="signinButton"><span id="signinText">Log In</span></a>            	
            </li>
        </ul>
    </div>
</div>
<div id="content">
<div id="signupbox">
	<h3 id="signupheader">Log In</h3>
		<form name="signupform" id="signupform" onsubmit="return false;">
			<div class="inputheader"><span>Email Address</span></div>
				<input id="email" class="textinput" type="text" onfocus="emptyElement('status')" onkeyup="restrict('email')" maxlength="88" placeholder="Email Address">
			<div class="inputheader"><span>Password</span></div>
				<input id="password" class="textinput" type="password" onfocus="emptyElement('status')" maxlength="100" placeholder="Password">
			<label>
				<input class="binaryinput" type="checkbox" name="check" id="check"><span id="stayloggedtext">Stay logged in</span>
			</label>
            <input id="submit" type="submit" onclick="login()">
  </form>
  <span id="status"></span><br>
    <div id="loginbtn" onclick="login()"><span>Log In</span></div>
    <div id="divider"></div>
    <div id="signup">
    	Not a member yet? <br><a href="signup.php">Create an Account</a>
    </div>
    <br>
    <div id="forgotpass">
    	Having trouble logging in? <br><a href="forgotpassword.php">Forgot Password</a>
    </div>
</div>
</div>

<div id="footer">
	<div id="footerContent">
    	<img src="http://competifund.com/images/logo_center.png" alt="competifund_logo_small" id="logo_small"><span id="LLC">LLC</span>
        <p id="footer_copyright">© 2016</p>
        <script src="js/year.js"></script>
        <ul id="footerHelp">
        	<li class="footerExploreHeader">Help</li>
        	<li><a href="#">How It Works</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Privacy / Terms</a></li>
        </ul>
        <ul id="footerExplore_col1">
        	<li class="footerExploreHeader">Explore</li>
        	<li><a href="#">Art</a></li>
            <li><a href="#">Beauty</a></li>
        	<li><a href="#">Comedy</a></li>
        </ul>
        <ul id="footerExplore_col2">
			<li><br></li>
            <li><a href="#">Education</a></li>
            <li><a href="#">Fashion</a></li>
        	<li><a href="#">Film</a></li>
		</ul>
        <ul id="footerExplore_col3">
        	<li><br></li>
            <li><a href="#">Journalism</a></li>
            <li><a href="#">Music</a></li>
            <li><a href="#">Photography</a></li>
		</ul>
        <ul id="footerExplore_col4">
        	<li><br></li>
            <li><a href="#">Science</a></li>
            <li><a href="#">Sports</a></li>
            <li><a href="#">Theatre</a></li>
        </ul>
        <ul id="footerSocial">
        	<li id="footerSocialHeader">Stay in the Loop</li>
            <li class="socialIcons"><a href="http://instagram.com/competifund" target="_blank"><img src="images/instagram-logo.png" alt="instagram_logo" width="30" height="30" title="Follow Competifund on Instagram"></a></li>
            <li class="socialIcons"><a href="http://twitter.com/competifund" target="_blank"><img src="images/twitter-logo.png" alt="twitter_logo" width="30" height="30" title="Follow Competifund on Twitter"></a></li>
            <li class="socialIcons"><a href="http://facebook.com/competifund" target="_blank"><img src="images/facebook-logo.png" alt="facebook_logo" width="30" height="30" title="Like Competifund on Facebook"></a></li>
        </ul>
    </div>
</div>
</div>

</body></html>