Node.js + Express - 在Google Chrome中加载CSS但不在Firefox中加载

时间:2014-12-14 21:58:59

标签: css node.js google-chrome firefox express

我是NodeJS / Express的新手,我正在开发一个简单的服务器应用程序来更新客户端窗口中的时钟。我一直在使用Chrome进行开发,一切都运行良好。但是,当我稍后在Firefox中尝试该应用程序时,我注意到没有应用任何CSS规则。我查看了Firefox调试器屏幕中的“网络”选项卡,确认浏览器已成功获取CSS文件。所以我的问题是,为什么CSS在Chrome上正确加载而在Firefox上没有?一个解决方案很好,但我也有兴趣了解这里发生了什么,或者我做错了什么。

请注意,CSS文件位于./public/css/link-server.css
这是我的代码(我也对我的nodejs / express代码和组织的一般改进持开放态度):

链路server.js

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');
});

链路server.html

<!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>

链路server.css

@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;
}

0 个答案:

没有答案