2016-03-22 15 views
1

Bu, iki fotoğrafı karşılaştıran ve tıklanmayanı değiştiren basit bir web sayfasıdır. Kod, Chrome'da mükemmel bir şekilde çalışıyor ancak Firefox'ta, HTML basit metin olarak gösteriliyor ve hatta bağlantılar çalışmıyor. KODU: -CSS firefox çalışmıyor (veya HTML basit yazı olarak görüntülenebilir)

* { 
 
    box-sizing: border-box; 
 
} 
 
html { 
 
    height: 100%; 
 
} 
 
body { 
 
    height: 100%; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
header { 
 
    padding: 5px; 
 
    background-color: red; 
 
    color: white; 
 
    text-align: center; 
 
    font-family: Magneto; 
 
    -webkit-box-shadow: 4px 4px 7px grey; 
 
    -ms-box-shadow: 4px 4px 7px grey; 
 
    -moz-box-shadow: 4px 4px 7px grey; 
 
    -o-box-shadow: 4px 4px 7px grey; 
 
    box-shadow: 4px 4px 7px grey; 
 
} 
 
main { 
 
    margin: 10px; 
 
} 
 
#ques { 
 
    font-family: Cooper; 
 
    font-size: 125%; 
 
    font-weight: normal; 
 
} 
 
#imageContainer { 
 
    margin: auto; 
 
    text-align: center; 
 
    display: block; 
 
} 
 
.image { 
 
    width: 20%; 
 
    height: auto; 
 
    display: inline-block; 
 
    border: 2px solid black; 
 
    padding: 3px; 
 
} 
 
#or { 
 
    display: inline-block; 
 
    font-family: arial; 
 
} 
 
#leftImage { 
 
    margin-right: 10px; 
 
} 
 
#rightImage { 
 
    margin-left: 10px; 
 
} 
 
@media screen and (max-width: 600px) { 
 
    .image { 
 
    width: 30%; 
 
    } 
 
} 
 
aside { 
 
    font-size: 105%; 
 
    text-align: center; 
 
    margin: 20px 5px 5px 5px; 
 
}
<!DOCTYPE html> 
 
<html lang="en-US" dir="ltr"> 
 

 
<head> 
 
    <link rel="stylesheet" type="text/css" href="D:/staticFbs.css" /> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
    <script> 
 
    var x = 1; 
 
    var y = 2; 
 
    $(document).ready(function() { 
 
     $("#leftImage").click(function() { 
 
     x = x + 2; 
 
     $("#rightImage").attr("src", "D:/staticFbp/boys/" + (x) + ".jpg"); 
 
     if (x > y) { 
 
      var temp = y; 
 
      y = x; 
 
      x = temp; 
 
     }; 
 
     }); 
 
     $("#rightImage").click(function() { 
 
     y = y + 1; 
 
     $("#leftImage").attr("src", "D:/staticFbp/boys/" + (y) + ".jpg"); 
 
     if (x > y) { 
 
      var temp = y; 
 
      y = x; 
 
      x = temp; 
 
     }; 
 
     if (y > (x + 1)) { 
 
      x = x + 1; 
 
     }; 
 
     }); 
 
    }); 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <header> 
 
    <h1><abbr title="Ranking fun">SJSBook</abbr></h1> 
 
    </header> 
 
    <main> 
 
    <h3 id="ques">Q: Who is better?</h3> 
 
    <div id="imageContainer"> 
 
     <img src="D:/staticFbp/boys/1.jpg" alt="Contestant 1" class="image" id="leftImage" /> 
 
     <div id="or"><b>OR</b> 
 
     </div> 
 
     <img src="D:/staticFbp/boys/2.jpg" alt="Contestant 2" class="image" id="rightImage" /> 
 
    </div> 
 
    <aside><em>Feel free as your votes will be confidential.</em> 
 
    </aside> 
 
    </main> 
 
</body> 
 

 
</html>

Preview of webpage in firefox

+1

check css link Href yolu .. – hemanjosko

+0

burada çalışıyor, uzantı dosyanız nedir? html mi yoksa başka bir uzantı adı mı (klasör/sunucu aynı değil :)) –

+0

css link href doğrudur (kontrol edilmiş ve kromda da çalışıyor) @hemanjosko –

cevap

1

Kullanım göreli yolu mutlak Yollar:

<link rel="stylesheet" type="text/css" href="staticFbs.css" /> 
+0

Bu yol aslında komik görünüyor olsa da, neden çalışmaz diye bir sebep göremiyorum. Bunun dışında, bunun yerine html biçimlendirmesinin neden metin olarak gösterildiğini açıklamayacaktır. – arkascha

+0

Görüntü yollarına da bunu uygulayın – Bart

+1

HTML dosya uzantınız nedir? – bugyt

1

Sen projenizden o bağlamak zorunda. CSS dosyalarını projeye kök klasörün altına veya herhangi bir şeye koyun.

<link rel="stylesheet" type="text/css" href="../foldername/staticFbs.css" /> 
+0

Firefox'ta web sayfası görünümüne bir link ekledim. –

+0

** ** bölüm – Hadnazzar

+0

kullanmayı deneyin. Kesinlikle mutlak bağlantılar yerine göreli bağlantılar kullandıktan sonra çalışıyor. –

0

Eğer D-sürücüsüne bağlantı veriyor hem CSS-filepath ve ayrıca jQuery .. Bu yerel üzerine çözerseniz şansı böylece online koyduğunuzda çalışmayacak Firefox sorununuzu da çözecektir.

İlgili konular