网站可在Safari中运行，但不能在Firefox或Chrome中运行
[英]Site working in Safari but not Firefox or Chrome
问题描述
I have a made a website, and it was all going swimmingly until I tried to open it in chrome and then firefox. 
我已经建立了一个网站，并且一切都进行得很顺利，直到我尝试用chrome和Firefox来打开它。 Nothing.. 没有..
I would really appreciate if anyone could help me as to why it is only working on Safari? 如果有人可以帮助我说明为什么它只能在Safari上运行，我将不胜感激。
Thank you. 谢谢。
below is my code- 以下是我的代码-
<!doctype html>
<html>
<head>
<style type="text/css">
a:hover {
cursor:default;
}
</style>
<style type="text/css">
a { text-decoration:none }
</style>
<meta charset="UTF-8">
<style type="text/css">
body {
margin: 0;
font-size: 20px;
font-family: Avenir;
font-style: normal;
font-size:26px;
font-weight: 500;
}
section {
display: block;
height: auto;
width: auto;
min-width: auto;
min-height: 700px;
padding: 151px;
}
#RIP{
background: #000000;
color: #FFFFFF;
font-family: Avenir;
color: #ffffff;
font-size: 26px;
font-weight: 500;
transform: scale(7.193,7.193);
}
#Concept{
background:#FFFFFF;
color:#000000;
}
#Clients{
background:#000000;
color:#FFFFFF;
}
#Contact{
background:#FFFFFF;
color:#000000;
}
nav {
font-style: normal;
font-size:12px
color: #FFFFFF;
background color:#FFFFFF
text-decoration: none;
position: fixed;
text-align: center;
list-style-position: centre;
padding: 18px;
text-align:center
}
.nav {
position: fixed;
color: #FFFFFF;
background-color: #000000;
list-style-position: centre;
nav-index: centre;
text-decoration: none;
text-align: centre;
}
</style>
<script src="javascripts/jquery-1.11.1.min.js"></script>
<script src="javascripts/smoothscroll.js"></script>
<style type="text/css">
a:link {
COLOR: #FFFFFF;
}
a:visited {
COLOR: #FFFFFF;
}
a:hover {
COLOR: #000000;
}
a:active {
COLOR: #000000;
}
</style>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<style type="text/css">
body {
margin: 0;
font-size: 20px;
font-family: Avenir;
font-style: normal;
font-size:26px;
font-weight: 500;
}
section {
display: block;
height: auto;
width: auto;
min-width: auto;
min-height: 700px;
padding: 151px;
}
#RIP{
background: #000000;
color: #FFFFFF;
font-family: Avenir;
color: #ffffff;
font-size: 26px;
font-weight: 500;
transform: scale(7.193,7.193);
}
#Concept{
background:#FFFFFF;
color:#000000;
}
#Clients{
background:#000000;
color:#FFFFFF;
}
#Contact{
background:#FFFFFF;
color:#000000;
}
nav {
font-style: normal;
font-size:12px
color: #FFFFFF;
background color:#FFFFFF
text-decoration: none;
position: fixed;
text-align: center;
list-style-position: centre;
padding: 18px;
text-align:center
}
.nav {
position: fixed;
color: #FFFFFF;
background-color: #000000;
list-style-position: centre;
nav-index: centre;
text-decoration: none;
text-align: centre;
}
</style>
<script src="javascripts/jquery-1.11.1.min.js"></script>
<script src="javascripts/smoothscroll.js"></script>
<style type="text/css">
a:link {
COLOR: #FFFFFF;
}
a:visited {
COLOR: #FFFFFF;
}
a:hover {
COLOR: #000000;
}
a:active {
COLOR: #000000;
}
</style>
<script type="text/javascript">
</script>
</head>
<nav></nav>
<nav class="nav"><a href="#RIP">RIP</a> <a href="#Scope">Scope</a> <a href="#Clients">Clients</a> <a href="#Contact">Contact</a></nav>
<section id="RIP"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('logo','','/images/blank.png',1)"><img src="/images/RIP.png" alt="" width="492" height="106" id="logo"></a><br>
<p> RestInProjects is a strategic consultancy and collaborative studio based<br>
in London and Berlin.</p>
<p>
We focus on but are not limited to; advising, public relations, web, media<br>
and design in the fashion industy.
</section>
<section id="Scope">Scope<p>
Social Media Management, Strategic consultancy, Sourcing, Production,<br>
Content creation, E-commerce, Networking, Web Design, App Design,<br>
Casting, Design, Press, PR
</section>
<section id="Clients">Clients<p>
Adidas, American Express, Barbour, Bread & Butter Asia, Capsule,<br>
Coffin on Cake, Drapers, Fred Perry, GQ, Harvey Nichols, i-D<br>
Jacket Required, Lacoste, Malmo London, Mini, Mo Studior, Niice<br>
London, SEEK, U-homme, Umbro, Van Liebling, WeShallRun<br>
</section>
<section id="Contact">Contact<p>
Portfolio On Request<br>
info@restinprojects.com
</section>
<p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<span style="text-align: right">RIP.</span>
</body>
</html>
3 个解决方案
解决方案1
0 2014-11-18 22:27:02
You have a lot of misspelled words like in your CSS code you wrote "centre" instead of "center". 您有很多拼写错误的单词，例如在CSS代码中写的是“中心”而不是“中心”。
Also, you're missing semicolons in line 55 and 57. 另外，您在55和57行中缺少分号。
I recommend you open your code in some IDE like Aptana Studio or Netbeans and it will automatically mark the errors for you. 我建议您在某些IDE（例如Aptana Studio或Netbeans）中打开代码，它将自动为您标记错误。
Edit: just noticed you're also missing the opening body tag. 编辑：刚注意到您还缺少开头body标签。
解决方案2
0 2014-11-18 22:43:33
You're missing a <BODY> tag. 您缺少<BODY>标签。
Run your website through the W3C syntax validator to find more issues. 通过W3C语法验证器运行您的网站，以查找更多问题。 http://validator.w3.org/ http://validator.w3.org/
解决方案3
0 已采纳 2014-11-18 22:49:46
Have a look on Ameer Elsherif 's answer pointing out some ofe your issues. 查看Ameer Elsherif的答案，指出您的一些问题。 Another problem is this: 另一个问题是：
In two <style> -tags you set styles for #RIP . 在两个<style> -tags中，您可以设置#RIP样式。
Remove in both the line transform: scale(7.193,7.193); 删除两个行中的transform: scale(7.193,7.193); then the page looks same in all browsers. 那么该页面在所有浏览器中看起来都是一样的。
With scale(7.193,7.193) you blow up the size of the page. 使用scale（7.193,7.193）可以放大页面的大小。 Only Safari doesn't understand transform and displays it in normal size. 只有Safari无法理解转换，并以正常大小显示。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.