我创建了一个基于Chrome的网站，但没有经常检查与IE和Firefox的兼容性。结果是我在这两个页面中遇到了这个问题（请使用Firefox或IE查看问题，然后使用Chrome进行比较）：
http://www.onsyzygy.com/Contact.html
http://www.onsyzygy.com/Store.html
第一个忽略了我对缩略图的限制，而第二个忽略了它们之间的填充，似乎。
这是CSS和＆＃34;联系人＆＃34;和＆＃34; Store＆＃34; HTML文件作为一个整体，因为我不知道 问题究竟在哪里：
.thumb {
max-height: 75px;
max-width: 285px;
max-width: 100%
border: 0;
-ms-interpolation-mode: bicubic;
}
.thumb1{
max-height: 700px;
max-width: 50px;
max-width: 100%
border: 0;
-ms-interpolation-mode: bicubic;
}
.thumb2{
max-height: 100px;
max-width: 30px;
max-width: 100%
border: 0;
-ms-interpolation-mode: bicubic;
}
.thumb3{
max-height: 85px;
max-width: 310px;
max-width: 100%
border: 0;
-ms-interpolation-mode: bicubic;
}
#navbar1
{
display: inline-block;
white-space: nowrap;
float: left;
list-style: none;
position: relative;
left: -1%;
right: -30%;
-webkit-box-shadow: 0px 0px 8px 0px #000000;
background-color: white;
width: 140%;
margin-top: -8px;
overflow-x: auto;
overflow-y: auto;
text-align: center;
margin-left: -22%;
}
#navbar2
{
display: inline-block;
white-space: nowrap;
float: left;
list-style: none;
position: relative;
left: -1%;
right: -30%;
-webkit-box-shadow: 0px 0px 8px 0px #000000;
background-color: white;
width: 140%;
margin-top: -8px;
overflow-x: auto;
overflow-y: auto;
text-align: center;
margin-left: -22%;
}
#navbar3
{
display: inline-block;
white-space: nowrap;
float: left;
list-style: none;
position: relative;
left: -1%;
right: -30%;
-webkit-box-shadow: 0px 0px 8px 0px #000000;
background-color: white;
width: 140%;
margin-top: -26px;
overflow-x: auto;
overflow-y: auto;
text-align: center;
margin-left: -22%;
}
.navbar li
{
display: inline-block;
white-space: nowrap;
margin-left: 0;
margin-right: 0;
}
.navbar a:link,a:visited
{
display:block;
width:130px;
font-weight:bold;
color:#999999;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:18px;
background-color:#FFFFFFF;
text-align:center;
padding:7px;
text-decoration:none;
text-transform: none;
}
.navbar a:hover,a:active
{
background:#a2b3a1;
color:#000;
}
#bgcontainer
{
width: 175%;
overflow: hidden;
position: relative;
}
.st1 {
float: left;
margin-top: 170px;
margin-left: 600px;
border-left-width: 0px;
border-right-width: 0px;
position: relative;
}
.st2 {
float: left;
margin-top: 170px;
margin-left: 10px;
border-left-width: 0px;
border-right-width: 0px;
position: relative;
}
.st3 {
float: left;
margin-top: 170px;
margin-left: 5px;
border-left-width: 0px;
border-right-width: 0px;
position: relative;
}
.box {
width:300px;
height:300px;
position:fixed;
margin-left:-325px;
margin-top:-170px;
top:50%;
left:50%;
}
.box0{
width:300px;
height:300px;
position:fixed;
margin-left:-325px;
margin-top:-170px;
top:50%;
left:50%;
}
.box1 {
width:300px;
height:300px;
position:fixed;
margin-left:-478px;
margin-top:-170px;
top:50%;
left:50%;
}
.box2 {
width:300px;
height:300px;
position:fixed;
margin-left:-485px;
margin-top:-150px;
top:50%;
left:50%;
}
.concept {
width:300px;
height:300px;
position:fixed;
margin-left:-325px;
margin-top: -335px;
top:50%;
left:50%;
}
.comics {
width:300px;
height:300px;
position:fixed;
margin-left:-394px;
margin-top:-90px;
top:50%;
left:50%;
}
.DI {
width:300px;
height:300px;
position:fixed;
margin-left:-324px;
margin-top: 110px;
top:50%;
left:50%;
}
#thumbs
{
width: 2000px;
}
#thumbs img
{
display: inline;
white-space: nowrap;
float: left;
list-style: none;
position: center center;
}
html {
width:100%;
height:100%;
position: relative;
}
body {
overflow-y: hidden;
overflow-x: hidden;
}<!DOCTYPE html>
<!-- DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="http://www.onsyzygy.com/stylesheet.css" rel="stylesheet" type="text/css" />
<title>Onsyzygy | Contact</title>
<div>
<ul id="navbar1" class="navbar">
<li><a href="http://www.onsyzygy.com/">Home</a></li>
<li><a href="http://onsyzygy.com/Portfolio.html">Portfolio</a></li>
<li><a href="http://www.onsyzygy.com/Blog">Blog</a></li>
<li><a href="http://www.onsyzygy.com/Store.html">Store</a></li>
<li><a href="http://www.onsyzygy.com/Contact.html">Contact</a></li>
</ul></div>
<style type="text/css">
p
{
font-size:11px; font-family:Verdana, Geneva, sans-serif; text-align:left;}
</style>
</head>
<body width="100%" class='wsite-theme-light' color="FFFFFF">
<div id="bgcontainer">
<style>
body
{
background-image: url('http://www.onsyzygy.com/Monogram background.jpg'); /* This is your background image */
background-size:1300px;
background-repeat:no-repeat;
background-position: fixed;
background-position:center center;
}
</style>
</div>
<br>
<br>
<TABLE WIDTH="80" height="10" BORDER="0" CELLPADDING="5" CELLSPACING="10" style="float: left; margin: 0px;">
<!-- <tr><th><img src="http://www.onsyzygy.com/Contact/Links/Connect1.jpg" width="70%"></th></tr><-->
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td><img class="thumb" WIDTH="285" height="75" src="http://www.onsyzygy.com/Contact/Links/Social.png"></a></td>
</tr>
<tr>
<td><a href="mailto:gabriele.cuscino@gmail.com" target="_blank"><img src="http://www.onsyzygy.com/Contact/Links/Gm.png" onmouseover="this.src='http://www.onsyzygy.com/Contact/Links/Gm1.png'"
onmouseout="this.src='http://www.onsyzygy.com/Contact/Links/Gm.png'"border="0" align="left" height="30%"></p></a></td>
</tr>
<tr>
<td><a href="https://www.facebook.com/onsyzygy" target="_blank"><img src="http://www.onsyzygy.com/Contact/Links/Fb.png" onmouseover="this.src='http://www.onsyzygy.com/Contact/Links/Fb1.png'"
onmouseout="this.src='http://www.onsyzygy.com/Contact/Links/Fb.png'"border="0" align="left" height="30%"></p></a></td>
</tr>
<tr>
<td><a href="https://twitter.com/GabrieleCuscino" target="_blank"><img src="http://www.onsyzygy.com/Contact/Links/Tw.png" onmouseover="this.src='http://www.onsyzygy.com/Contact/Links/Tw1.png'"
onmouseout="this.src='http://www.onsyzygy.com/Contact/Links/Tw.png'"border="0" align="left" height="30%"></p></a></td>
</tr>
<tr>
<td><a href="http://onsyzygy.deviantart.com/gallery/" target="_blank"><img src="http://www.onsyzygy.com/Contact/Links/Da.png" onmouseover="this.src='http://www.onsyzygy.com/Contact/Links/Da1.png'"
onmouseout="this.src='http://www.onsyzygy.com/Contact/Links/Da.png'"border="0" align="left" height="30%"></p></a></td>
</tr>
<tr>
<td><a href="http://onsyzygy.tumblr.com/" target="_blank"><img src="http://www.onsyzygy.com/Contact/Links/Tb.png" onmouseover="this.src='http://www.onsyzygy.com/Contact/Links/Tb1.png'"
onmouseout="this.src='http://www.onsyzygy.com/Contact/Links/Tb.png'"border="0" align="left" height="30%"></p></a></td>
</tr>
</table>
<TABLE WIDTH="50" height="20" BORDER="0" CELLPADDING="5" CELLSPACING="0" style="float: left; margin: 0px;">
<tr>
<td><img class="thumb1" WIDTH="50" height="700" src="http://www.onsyzygy.com/Contact/Links/Divider1.png"></td>
</tr>
</table>
<TABLE WIDTH="30" height="40" BORDER="0" CELLPADDING="5" CELLSPACING="10" style="float: left; margin: 0px;">
<tr>
<td><img class="thumb2" WIDTH="30" height="120" src="http://www.onsyzygy.com/Contact/Links/Blank.png"></a></td>
</tr>
<tr>
<td><img class="thumb2" WIDTH="30" height="100" src="http://www.onsyzygy.com/Contact/Links/Blank.png"></a></td>
</tr>
<tr>
<td><img class="thumb2" WIDTH="30" height="100" src="http://www.onsyzygy.com/Contact/Links/Blank.png"></a></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td><a href="http://www.onsyzygy.com/Download/Portfolio.pdf" download="Portfolio"><img src="http://www.onsyzygy.com/Contact/Links/GC.png" onmouseover="this.src='http://www.onsyzygy.com/Contact/Links/GC2.png'"
onmouseout="this.src='http://www.onsyzygy.com/Contact/Links/GC.png'"border="0" align="right" height="30%"></p></a></td></tr>
<tr>
<td><img class="thumb3" WIDTH="310" height="85" src="http://www.onsyzygy.com/Contact/Links/Portfolio.png" align="right"></a></td>
</tr>
</body>
</html>
.thumb {
max-height: 75px;
max-width: 285px;
max-width: 100%
border: 0;
-ms-interpolation-mode: bicubic;
}
.thumb1{
max-height: 700px;
max-width: 50px;
max-width: 100%
border: 0;
-ms-interpolation-mode: bicubic;
}
.thumb2{
max-height: 100px;
max-width: 30px;
max-width: 100%
border: 0;
-ms-interpolation-mode: bicubic;
}
.thumb3{
max-height: 85px;
max-width: 310px;
max-width: 100%
border: 0;
-ms-interpolation-mode: bicubic;
}
#navbar1
{
display: inline-block; /* Displays it as a line, instead of a column; needed to eliminate the float element for the "nowrap" feature */
white-space: nowrap; /* Eliminates the word wrap for the navbar */
float: left; /* Needed to center */
list-style: none; /* Needed to center */
position: relative; /* Needed to center */
left: -1%; /* Needed to center, -10% for compensanting */
right: -30%;
-webkit-box-shadow: 0px 0px 8px 0px #000000; /*adds a shadow*/
/*-moz-box-shadow: 0px 0px 8px 0px #000000; /* Adds the transparent background if no bg color is set */
background-color: white; /* Adds the background color */
width: 140%; /* Makes the background to be extended to the whole screen */
margin-top: -8px; /* This moves the bar on the Y axis */
overflow-x: auto;
overflow-y: auto;
text-align: center;
margin-left: -22%; /* these two lines are adding white spaces in the navbar textes, before and after - I've set this to center the navbar and it seems to work together with "right: -30%" */
}
#navbar2
{
display: inline-block; /* Displays it as a line, instead of a column; needed to eliminate the float element for the "nowrap" feature */
white-space: nowrap; /* Eliminates the word wrap for the navbar */
float: left; /* Needed to center */
list-style: none; /* Needed to center */
position: relative; /* Needed to center */
left: -1%; /* Needed to center, -10% for compensanting */
right: -30%;
-webkit-box-shadow: 0px 0px 8px 0px #000000; /*adds a shadow*/
/*-moz-box-shadow: 0px 0px 8px 0px #000000; /* Adds the transparent background if no bg color is set */
background-color: white; /* Adds the background color */
width: 140%; /* Makes the background to be extended to the whole screen */
margin-top: -8px; /* This moves the bar on the Y axis */
overflow-x: auto;
overflow-y: auto;
text-align: center;
margin-left: -22%; /* these two lines are adding white spaces in the navbar textes, before and after - I've set this to center the navbar and it seems to work together with "right: -30%" */
}
#navbar3
{
display: inline-block; /* Displays it as a line, instead of a column; needed to eliminate the float element for the "nowrap" feature */
white-space: nowrap; /* Eliminates the word wrap for the navbar */
float: left; /* Needed to center */
list-style: none; /* Needed to center */
position: relative; /* Needed to center */
left: -1%; /* Needed to center, -10% for compensanting */
right: -30%;
-webkit-box-shadow: 0px 0px 8px 0px #000000; /*adds a shadow*/
/*-moz-box-shadow: 0px 0px 8px 0px #000000; /* Adds the transparent background if no bg color is set */
background-color: white; /* Adds the background color */
width: 140%; /* Makes the background to be extended to the whole screen */
margin-top: -26px; /* This moves the bar on the Y axis */
overflow-x: auto;
overflow-y: auto;
text-align: center;
margin-left: -22%; /* these two lines are adding white spaces in the navbar textes, before and after - I've set this to center the navbar and it seems to work together with "right: -30%" */
}
.navbar li
{
display: inline-block;
white-space: nowrap;
margin-left: 0; /* these two lines are adding white spaces in the navbar textes, before and after */
margin-right: 0;
}
.navbar a:link,a:visited
{
display:block;
width:130px; /* spacing between the buttons */
font-weight:bold;
color:#999999;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:18px;
background-color:#FFFFFFF;
text-align:center;
padding:7px; /* this adds space between the top of the page and the navbar */
text-decoration:none; /*this is to eliminate the underline in the links */
text-transform: none;
}
.navbar a:hover,a:active
{
background:#a2b3a1;
color:#000;
}
#bgcontainer
{
width: 175%;
overflow: hidden;
position: relative;
}
.st1 {
float: left;
margin-top: 170px;
margin-left: 600px;
border-left-width: 0px;
border-right-width: 0px;
position: relative;
}
.st2 {
float: left;
margin-top: 170px;
margin-left: 10px;
border-left-width: 0px;
border-right-width: 0px;
position: relative;
}
.st3 {
float: left;
margin-top: 170px;
margin-left: 5px;
border-left-width: 0px;
border-right-width: 0px;
position: relative;
}
.box {
width:300px;
height:300px;
position:fixed;
margin-left:-325px;
margin-top:-170px;
top:50%;
left:50%;
}
.box0{
width:300px;
height:300px;
position:fixed;
margin-left:-325px;
margin-top:-170px;
top:50%;
left:50%;
}
.box1 {
width:300px;
height:300px;
position:fixed;
margin-left:-478px;
margin-top:-170px;
top:50%;
left:50%;
}
.box2 {
width:300px;
height:300px;
position:fixed;
margin-left:-485px;
margin-top:-150px;
top:50%;
left:50%;
}
.concept {
width:300px;
height:300px;
position:fixed;
margin-left:-325px;
margin-top: -335px;
top:50%;
left:50%;
}
.comics {
width:300px;
height:300px;
position:fixed;
margin-left:-394px;
margin-top:-90px;
top:50%;
left:50%;
}
.DI {
width:300px;
height:300px;
position:fixed;
margin-left:-324px;
margin-top: 110px;
top:50%;
left:50%;
}
#thumbs
{
width: 2000px;
}
#thumbs img
{
display: inline;
white-space: nowrap;
float: left;
list-style: none;
position: center center;
}
html {
width:100%;
height:100%;
position: relative;
}
body {
overflow-y: hidden; /* this pins the background and hide the scroll bar for the whole body */
overflow-x: hidden;
}
/*.stretch
margin: auto;
height:100% */
}
/*#h2 {
font-size: 1.5em;
background-color: #ccc;
margin: 1em;
padding: 3em;
} */ /*text format for "Gallery" thumbnails */<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="http://www.onsyzygy.com/stylesheet.css" rel="stylesheet" type="text/css" />
<title>Onsyzygy | Store</title>
<div>
<ul id="navbar1" class="navbar">
<li><a href="http://www.onsyzygy.com/">Home</a></li>
<li><a href="http://onsyzygy.com/Portfolio.html">Portfolio</a></li>
<li><a href="http://www.onsyzygy.com/Blog">Blog</a></li>
<li><a href="http://www.onsyzygy.com/Store.html">Store</a></li>
<li><a href="http://www.onsyzygy.com/Contact.html">Contact</a></li>
</ul>
</div>
<style type="text/css">
p
{
font-size:11px; font-family:Verdana, Geneva, sans-serif; text-align:left;}
</style>
</head>
<body width="100%" class=' wsite-theme-light' color="FFFFFF">
<div id="bgcontainer">
<style>
body
{
background-image: url('http://www.onsyzygy.com/Section.jpg'); /* This is your background image */
background-size:1300px;
background-repeat:no-repeat;
background-position: fixed;
background-position:center center;
}
</style>
</div>
<br>
<TABLE WIDTH="80" height="10" BORDER="0" CELLPADDING="5" CELLSPACING="10" style="float: left; margin: 0px;">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td><img WIDTH="285" height="75" src="http://www.onsyzygy.com/Contact/Links/Prints.png"></a></td>
</tr>
<tr>
<td><a href="http://www.designbyhumans.com/shop/Onsyzygy/" target="_blank"><img src="http://www.onsyzygy.com/Contact/Links/Db.png" onmouseover="this.src='http://www.onsyzygy.com/Contact/Links/Db1.png'"
onmouseout="this.src='http://www.onsyzygy.com/Contact/Links/Db.png'"border="0" align="left" height="30%"></p></a></td>
</tr>
<tr>
<td><a href="http://www.qwertee.com/profile/338039" target="_blank"><img src="http://www.onsyzygy.com/Contact/Links/Qw.png" onmouseover="this.src='http://www.onsyzygy.com/Contact/Links/Qw1.png'"
onmouseout="this.src='http://www.onsyzygy.com/Contact/Links/Qw.png'"border="0" align="left" height="30%"></p></a></td>
</tr>
<tr>
<td><a href="http://society6.com/GabrieleCuscino" target="_blank"><img src="http://www.onsyzygy.com/Contact/Links/s6.png" onmouseover="this.src='http://www.onsyzygy.com/Contact/Links/s61.png'"
onmouseout="this.src='http://www.onsyzygy.com/Contact/Links/s6.png'"border="0" align="left" height="30%"></p></a></td>
</tr></table>
<TABLE WIDTH="50" height="20" BORDER="0" CELLPADDING="5" CELLSPACING="0" style="float: left; margin: 0px;">
<tr>
<td><img height="500" src="http://www.onsyzygy.com/Contact/Links/Divider1.png"></td>
</tr>
</table>
<TABLE WIDTH="30" height="40" BORDER="0" CELLPADDING="5" CELLSPACING="10" style="float: left; margin: 0px;">
<tr>
<td><img WIDTH="30" height="120" src="http://www.onsyzygy.com/Contact/Links/Blank.png"></a></td>
</tr>
<tr>
<td><img WIDTH="30" height="100" src="http://www.onsyzygy.com/Contact/Links/Blank.png"></a></td>
</tr>
<tr>
<td><a href="http://form.jotformeu.com/form/43185775600356" target="_blank"><img src="http://www.onsyzygy.com/Contact/Links/GC.png" onmouseover="this.src='http://www.onsyzygy.com/Contact/Links/GC2.png'"
onmouseout="this.src='http://www.onsyzygy.com/Contact/Links/GC.png'"border="0" align="right" height="30%"></p></a></td></tr>
<tr>
<td><img WIDTH="310" height="85" src="http://www.onsyzygy.com/Contact/Links/Direct.png" align="right"></a></td>
</tr>
</table>
<br>
</div>
</body>
</html>
如果我做错了，请告诉我你是否需要其他媒体/信息。