我制作了一个HTML页面，其中包含一些CSS以及2个简单的高级图表（highcharts.com）
我已经在我自己的计算机上对此进行了本地测试，并对结果非常满意，我将其移至我们内部网络上的服务器，以便每个人都可以使用。
从服务器加载页面时，所有内容都显示为“错误”，您可以在以下2张图片中看到。
（我似乎不允许发布图片）
http://i46.tinypic.com/jaua7o.png
这是正确的布局。
http://i46.tinypic.com/1zo9dzo.png
这是不正确的布局。 正如您可能在不正确的布局上看到的那样，由于某种原因，菜单中的字母较小，而图表左侧的“千兆字节”正在遭受一些奇怪的奇怪的东西。除此之外，当图形加载到我的本地机器上时，它们会有一些时尚的动画，从外部服务器加载时不会显示。
尽管这些字母小于我的本地计算机上的字母，但很明显，某些格式化工作正常，因为菜单“排序”有效，这是用CSS制作的。
有关可能导致此问题的任何提示？我有点困惑，因为我认为无论是从我的本地机器还是从服务器加载HTML都是一样的。
提前感谢。
特定页面的代码（道歉，我没有评论它）：
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) { return pair[1]; }
}
return (false);
}
var kunde = getQueryVariable("area");
function onDownload() {
document.location = 'database' + kunde + '.csv';
}
$(document).ready(function () {
var graph = {
colors: [
'#696567',
'#525051'
],
exporting: { enabled: false },
chart: {
renderTo: 'container',
type: 'column'
},
credits: {
enabled: false
},
title: {
text: 'Imaginært Diskforbrug'
},
xAxis: {
categories: []
},
yAxis: {
min: 0,
title: {
text: 'Gigabyte'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -100,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: []
};
$.get("mfdisk" + kunde + ".txt", function(data) {
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
if (lineNo == 0) {
$.each(items, function(itemNo, item) {
if (itemNo > 0) graph.xAxis.categories.push(item);
})
;
}
else {
var series = {
data: []
};
$.each(items, function(itemNo, item) {
if (itemNo == 0) {
series.name = item;
} else {
series.data.push(parseFloat(item));
}
});
graph.series.push(series);
}
});
var chart = new Highcharts.Chart(graph);
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
var tapegraph = {
colors: [
'#525051'
],
exporting: { enabled: false },
chart: {
renderTo: 'tapecontainer',
type: 'column'
},
credits: {
enabled: false
},
title: {
text: 'Imaginært Tapeforbrug'
},
xAxis: {
categories: []
},
yAxis: {
min: 0,
title: {
text: 'Gigabyte'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -100,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: []
};
$.get("mftape" + kunde + ".txt", function (data) {
var lines = data.split('\n');
$.each(lines, function (lineNo, line) {
var items = line.split(',');
if (lineNo == 0) {
$.each(items, function (itemNo, item) {
if (itemNo > 0) tapegraph.xAxis.categories.push(item);
})
;
}
else {
var series = {
data: []
};
$.each(items, function (itemNo, item) {
if (itemNo == 0) {
series.name = item;
} else {
series.data.push(parseFloat(item));
}
});
tapegraph.series.push(series);
}
});
var chart = new Highcharts.Chart(tapegraph);
});
});
</script>
</head>
<body>
<ul class="tabmenu">
<li><a href="csv.html">Forside</a></li>
<li class="active"><a href="mfstart.html">Mainframe</a></li>
<li><a href="">AIX</a></li>
<li><a href="">Superdome</a></li>
<li><a href="">TEST</a></li>
</ul>
<div class="menu">
<a href="mf.html?area=AC">KMA</a>
<a href="mf.html?area=fAC">FrysAC</a>
<a href="mf.html?area=OC">KMO</a>
<a href="mf.html?area=fOC">FrysOC</a>
<a href="mf.html?area=BC">KMB</a>
<a href="mf.html?area=SAP">SAP</a>
<a href="mf.html?area=Eboks">Eboks</a>
<a href="mf.html?area=fBC">FrysBC</a>
<a href="mf.html?area=uAZ">Udv - AZ</a>
<a href="mf.html?area=uOZ">Udv - OZ</a>
<a href="mf.html?area=uBZ">Udv - BZ</a>
<a href="mf.html?area=TCS">TCS</a>
<a href="mf.html?area=COOP">COOP</a>
<a href="mf.html?area=U1">KMD Udv1</a>
<a href="mf.html?area=U2">KMD Udv2</a>
<a href="mf.html?area=Nem">Nemkonto</a>
<a href="mf.html?area=Systest">Systest</a>
<a href="mf.html?area=AKI">ÅKI</a>
<a href="mf.html?area=Ribe">Ribe</a>
<a href="mf.html?area=Eindkomst">E-indkomst</a>
<a href="mf.html?area=Fyn">Fyns Amt</a>
<a href="mf.html?area=KK">KK</a>
<a href="mf.html?area=KC">KC</a>
<a href="mf.html?area=FDC">FDC</a>
<a href="mf.html?area=ATP">ATP</a>
</div>
<div id="container" style="width: 720px; height: 360px; margin: 0 auto"></div>
<div id="tapecontainer" style="width: 720px; height: 360px; margin: 0 auto"></div>
<div class="downloadlink">
<a href="javascript:onDownload();">Klik her for at downloade database over kundens forbrug</a>
</div>
</body>
我知道我可能看起来很丰富，我为2个图表制作了几乎相同的代码，但是只要我在项目中进一步完成，这些代码就会大不相同。
答案 0 :(得分：0)
经过很多挫折，还有一些时间在其他项目上，我以新的眼光回到了这里。原来这个问题是因为IE9在兼容模式下自动在我们的本地Intranet上打开网页，我禁用了它，它就像一个魅力！