1
これは、2つの写真を比較してクリックされていないものを変更する簡単なWebページです。コードはChromeで完全に機能していますが、FirefoxではHTMLが単純なテキストとして表示されており、リンクさえも機能しません。 CODE： -CSSがFirefoxで動作しない（またはHTMLが単純なテキストとして表示される）
* {
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>
あなたのCSSファイルへのリンクを参照してください。 – hemanjosko
あなたの拡張ファイルは何ですか？それはhtmlやその他の拡張子の名前（フォルダ/サーバは同じではありません:)） –
cssのリンクhrefは正しいです（それをチェックしてクロムでも動作します）@hemanjosko –