图像不会在不同的浏览器中持续调整大小

时间：2015-01-10 21:30:50

标签： html css google-chrome internet-explorer firefox

我创建了一个基于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文件作为一个整体，因为我不知道 问题究竟在哪里：

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

＆＃13;
＆＃13; 
.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 */
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

如果我做错了，请告诉我你是否需要其他媒体/信息。

0 个答案:

没有答案
相关问题
最新问题