我们正在努力将 HighCharts 集成到我们现有的 ASP.NET 站点中,并且遇到了一个已知错误。这个错误是最初设置为 display:none 然后切换为显示不正确的元素显示不正确,因为某些浏览器无法计算隐藏对象的尺寸(例如 IE8)。此处和此处(在页面底部)提出的修复是为了做到这一点:
.hidden-container {
position: absolute;
top: -9999em;
}
如果您使用 jQuery CSS 来设置位置,这一切都很好。我们在后面的代码中设置位置和其他属性,例如:
If showExpanded Then
collapsedPanel.Style.Item("Display") = "none"
expandedPanel.Style.Item("Display") = "block"
Else
collapsedPanel.Style.Item("Display") = "block"
expandedPanel.Style.Item("Display") = "none"
End If
我可以将这些图表面板编辑为:
If showExpanded Then
collapsedPanel.Style.Item("Display") = "none"
expandedPanel.Style.Item("Display") = "block"
Else
collapsedPanel.Style.Item("Display") = "block"
expandedPanel.Style.Item("position") = "absolute"
expandedPanel.Style.Item("top") = "-9999em"
End If
我们在 javascript 文件中像这样切换隐藏/显示面板:
function showHidePanelToggle(ctlID, sPnlID, hPnlID) {
var chkBoxID = $('#' + chkID);
var controlID = $('#' + ctlID);
var showPanelID = $('#' + sPnlID);
var hidePanelID = $('#' + hPnlID);
if (controlID.attr('type') == 'checkbox') {
chkID = false;
if (controlID.is(':checked')) {
showPanelID.slideUp('normal');
hidePanelID.slideDown('normal');
}
else {
showPanelID.slideDown('normal');
hidePanelID.slideUp('normal');
}
}
else {
ctlID = false;
if ((hidePanelID).is(':hidden')) {
showPanelID.slideUp('normal');
hidePanelID.slideDown('normal');
chkBoxID.attr('checked', true);
return false;
}
else {
showPanelID.slideDown('normal');
hidePanelID.slideUp('normal');
chkBoxID.attr('checked', false);
return false;
}
}
}
我添加了检查以查看我是否在特殊的面板(图表)中,我正在这样做:
if ((hidePanelID).position(':absolute')) {
showPanelID.slideUp('normal');
hidePanelID.slideDown('normal');
chkBoxID.attr('checked', true);
return false;
}
else {
showPanelID.slideDown('normal');
hidePanelID.slideUp('normal');
chkBoxID.attr('checked', false);
return false;
}
这不是重新显示我的面板(我猜是因为它仍然设置为 -9999em。
我的问题是,我怎样才能让我的屏幕外面板正确显示?不幸的是,我们没有使用 jQuery CSS 文件来设置隐藏/显示和重写整个系统以使用这个新的 CSS 是行不通的。