我是NodeJS / Express的新手,我正在开发一个简单的服务器应用程序来更新客户端窗口中的时钟。我一直在使用Chrome进行开发,一切都运行良好。但是,当我稍后在Firefox中尝试该应用程序时,我注意到没有应用任何CSS规则。我查看了Firefox调试器屏幕中的“网络”选项卡,确认浏览器已成功获取CSS文件。所以我的问题是,为什么CSS在Chrome上正确加载而在Firefox上没有?一个解决方案很好,但我也有兴趣了解这里发生了什么,或者我做错了什么。
请注意,CSS文件位于./public/css/link-server.css
这是我的代码(我也对我的nodejs / express代码和组织的一般改进持开放态度):
var express = require('express');
var app = express();
var favicon = require('serve-favicon');
app.use(express.static(__dirname + '/public'));
app.use(favicon(__dirname + '/public/images/favicon.ico'));
var fs = require('fs');
var http = require('http').Server(app);
var io = require('socket.io')(http);
var AIN_PATH = '/sys/devices/ocp.3/44e0d000.tscadc/tiadc/iio:device0'
app.get('/', function(req, res){
res.sendFile(__dirname+'/link-server.html');
});
function pad(n) {
return (n < 10) ? ("0" + n) : n;
}
setInterval(function() {
var date = new Date();
var hours = date.getHours();
var minutes = pad(date.getMinutes());
var seconds = pad(date.getSeconds());
var timeString = hours + ":" + minutes + ":" + seconds;
io.sockets.emit('timer', { time: timeString });
//console.log(timeString);
}, 1000);
io.on('connection', function(socket){
console.log('Connected to client.');
socket.on('disconnect', function(){
console.log('Client disconnected.');
});
});
http.listen(2000, function(){
console.log('listening on *:2000');
});
<!doctype html>
<html>
<head>
<title>Web Interface</title>
<link href="/images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="/css/link-server.css" rel="stylesheet" type="text/-css"/>
</head>
<body>
<div id="header">
<img id="link-logo" src="/images/link-logo.png"/>
<div id="time" class="roboto">00:00:00</div>
</div>
</body>
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script>
var socket = io();
socket.on('timer', function (data) {
var counter = document.getElementById('time');
counter.innerHTML = data.time;
});
</script>
</html>
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: url("Roboto-Regular.ttf"); }
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url("Roboto-Regular.ttf"); }
.roboto {
font-family: "Roboto";
}
body {
margin: 0px;
}
#header {
padding-top: 10px;
padding-bottom: 10px;
min-width: 1000px;
background-color: #f5f5f5;
border-bottom: 1px solid #e5e5e5;
}
#link-logo {
width: 100px;
margin-left: 70px;
}
#time {
display: inline-block;
margin-left: 50px;
color: black;
color: #6b6e71;
font-size: 11pt;
}