在允许javascript之前不在Internet Explorer中显示网页的方法？
我已经建立了一个简单的页面，显示文本和各种格式化元素，还有一个照片库。照片库在较大的图像下方有一个水平滚动条。滚动区域包含单击后加载到较大图像区域的缩略图。这在Chrome、Firefox和Safari中运行良好 但是，在Internet Explorer中，JavaScript最初被阻止，用户必须允许它运行。在用户允许JavaScript之前，页面显示在后台，但照片库的格式不正确，因为它依赖于当前阻止的JavaScript（当前隐藏的较大图像显示在页面下方，看起来很糟糕）。是否有一种变通方法，在JavaScript被解除阻止或可能是另一种简单的解决方案之前，我根本不显示网页在允许javascript之前不在Internet Explorer中显示网页的方法？,javascript,html,css,Javascript,Html,Css,我已经建立了一个简单的页面，显示文本和各种格式化元素，还有一个照片库。照片库在较大的图像下方有一个水平滚动条。滚动区域包含单击后加载到较大图像区域的缩略图。这在Chrome、Firefox和Safari中运行良好 但是，在Internet Explorer中，JavaScript最初被阻止，用户必须允许它运行。在用户允许JavaScript之前，页面显示在后台，但照片库的格式不正确，因为它依赖于当前阻止的JavaScript（当前隐藏的较大图像显示在页面下方，看起来很糟糕）。是否有一种变通方法，
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>index</title>
<style type="text/css">
body {
/*font-size:12px; modify this within each element*/
}
#wrapper {
width:950px;
height:800px;
margin-left:5px;
margin-top:5px;
border-top:2px solid #bbb;
border-bottom:2px solid #bbb;
border-right:5px solid #000000;
border-left:5px solid #000000;
padding:0px;
}
#topwrap {
width:950px;
height:50px;
}
#topturqsq {
float:left;
width:250px;
height:50px;
background-color:#7ECCC0;
}
#topartdeco{
float:left;
width:698px;
height:48px;
background-color:#FA8072;
padding:1px;
}
#aptname{
float:left;
width:248px;
height:149px;
border-bottom:1px solid #bbb;
vertical-align:top;
}
#contactbanner{
float:left;
width:690px;
height:29px;
border-bottom:1px solid #000000;
text-align:right;
font-size:20px;
padding-right: 10px;
padding-top:10px;
font-family:arial,helvetica,sans-serif;
}
#photogallery{
width:698px;
height:555px;
border-bottom:1px solid #bbb;
float:left;
}
#maintext{
font-size:15px;
font-family:arial,helvetica,sans-serif;
}
ul{
list-style-type:none;
margin:10;
padding:0;
vertical-align:top;
position:relative;
}
a{
display:block;
color:#000000;
text-decoration:none;
}
#leftnav{
position:relative;
width:248px;
height:600px;
font-size:20px;
float:left;
font-family:arial,helvetica,sans-serif;
}
#leftwrap{
position:relative;
float:left;
width:249px;
height:750px;
border-right: 1px solid black;
}
#linkDiv{
width:698px;
height:120px;
overflow:auto;
white-space:nowrap;
border: 1px solid black;
float:left;
padding-top:15px;
}
#divLinks{
float:left;
}
#container1,#container2,#container3,#container4,#container5,#container6,#container7,#container8{
width:500px;
height:375px;
margin:0 auto;
padding-left:95px;
padding-top:20px;
padding-bottom:20px;
}
</style>
<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?266743-Switch-Div-Content-Using-Javascript&p=1229155#post1229155
function showDiv(idInfo) {
var sel = document.getElementById('divLinks').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
document.getElementById('container'+idInfo).style.display = 'block';
return false;
}
</script>
</head>
<body>
<div id="wrapper">
<div id="topwrap">
<div id="topturqsq">
</div>
<div id="topartdeco">
<img src="images/artdeco.png" width="349" align="left"> <img src="images/artdeco.png" width="349" align="right">
</div>
</div>
<div id="leftwrap">
<div id="aptname">
<img style="position:relative; top:15px; left:0px;" src="images/banner.png" width="248" >
</div>
<div id="leftnav">
<ul>
<li><a href="index.html" style="text-align:center;">Home</a></li>
<li><a href="index.html" style="text-align:center;">Amenities</a></li>
<li><a href="index.html" style="text-align:center;">Nearby</a></li>
<li><a href="index.html" style="text-align:center;">Photos</a></li>
<li><a href="index.html" style="text-align:center;">Lease</a></li>
<li><a href="index.html" style="text-align:center;">Contact US</a></li> <br>
<li><span style="text-align:center;display:block;text-decoration:underline">Floor Plans </span></li>
<li><a href="index.html" style="text-align:center;">2 Bedroom</a></li>
<li><a href="index.html" style="text-align:center;">1 Bedroom</a></li>
<li><a href="index.html" style="text-align:center;">Corporate</a></li>
<li><a href="index.html" style="text-align:center;">Efficiency</a></li>
</ul>
</div>
</div>
<div id="contactbanner">
<img src="images/phone.png" height="20" > Call us: (555) 555 - 5555
</div>
<div id="photogallery">
<div id="divLinks">
<div id="container1"><img src="images/Chrysanthemum.jpg" width="500" height="375" border="1"></div>
<div id="container2"><img src="images/Desert.jpg" width="500" height="375" border="1"></div>
<div id="container3"><img src="images/Hydrangeas.jpg" width="500" height="375" border="1"></div>
<div id="container4"><img src="images/Jellyfish.jpg" width="500" height="375" border="1"></div>
<div id="container5"><img src="images/Koala.jpg" width="500" height="375" border="1"></div>
<div id="container6"><img src="images/Lighthouse.jpg" width="500" height="375" border="1"></div>
<div id="container7"><img src="images/Penguins.jpg" width="500" height="375" border="1"></div>
<div id="container8"><img src="images/Tulips.jpg" width="500" height="375" border="1"></div>
</div>
<script type="text/javascript">
window.onload = function() { showDiv('1'); }
</script>
<div id="linkDiv">
<a href="#" onclick="return showDiv('1')" style="display:inline"><img src="images/Chrysanthemum.jpg" width="120" height="90"></a>
<a href="#" onclick="return showDiv('2')" style="display:inline"><img src="images/Desert.jpg" width="120" height="90"></a>
<a href="#" onclick="return showDiv('3')" style="display:inline"><img src="images/Hydrangeas.jpg" width="120" height="90"></a>
<a href="#" onclick="return showDiv('4')" style="display:inline"><img src="images/Jellyfish.jpg" width="120" height="90"></a>
<a href="#" onclick="return showDiv('5')" style="display:inline"><img src="images/Koala.jpg" width="120" height="90"></a>
<a href="#" onclick="return showDiv('6')" style="display:inline"><img src="images/Lighthouse.jpg" width="120" height="90"></a>
<a href="#" onclick="return showDiv('7')" style="display:inline"><img src="images/Penguins.jpg" width="120" height="90"></a>
<a href="#" onclick="return showDiv('8')" style="display:inline"><img src="images/Tulips.jpg" width="120" height="90"></a>
</div>
</div>
<div id="maintext">
<strong>heading</strong>
<blockquote>bunch of text</blockquote>
</div>
</div>
</body>
</html>
指数
正文{
/*字体大小：12px；在每个元素内修改*/
}
#包装纸{
宽度：950px；
高度：800px；
左边距：5px；
边缘顶部：5px；
边框顶部：2个实心#bbb；
边框底部：2倍实心#bbb；
右边框：5px实心#000000；
左边框：5px实心#000000；
填充：0px；
}
#顶包装{
宽度：950px；
高度：50px；
}
#topturqsq{
浮动：左；
宽度：250px；
高度：50px；
背景色：#7ECCC0；
}
#托帕特德科{
浮动：左；
宽度：698px；
高度：48px；
背景色：#FA8072；
填充：1px；
}
#aptname{
浮动：左；
宽度：248px；
高度：149px；
边框底部：1px实心#bbb；
垂直对齐：顶部；
}
#联系人{
浮动：左；
宽度：690px；
高度：29px；
边框底部：1px实心#000000；
文本对齐：右对齐；
字体大小：20px；
右边填充：10px；
填充顶部：10px；
字体系列：arial、helvetica、无衬线字体；
}
#照片库{
宽度：698px；
身高：555px；
边框底部：1px实心#bbb；
浮动：左；
}
#主文本{
字体大小：15px；
字体系列：arial、helvetica、无衬线字体；
}
保险商实验室{
列表样式类型：无；
保证金：10；
填充：0；
垂直对齐：顶部；
位置：相对位置；
}
a{
显示：块；
颜色：#000000；
文字装饰：无；
}
#左导航{
位置：相对位置；
宽度：248px；
高度：600px；
字体大小：20px；
浮动：左；
字体系列：arial、helvetica、无衬线字体；
}
#左包装{
位置：相对位置；
浮动：左；
宽度：249px；
高度：750px；
右边框：1px纯黑；
}
#linkDiv{
宽度：698px；
高度：120px；
溢出：自动；
空白：nowrap；
边框：1px纯黑；
浮动：左；
填充顶部：15px；
}
#divLinks{
浮动：左；
}
#集装箱1、集装箱2、集装箱3、集装箱4、集装箱5、集装箱6、集装箱7、集装箱8{
宽度：500px；
身高：375px；
保证金：0自动；
左侧填充：95px；
填充顶部：20px；
垫底：20px；
}
//发件人：http://www.webdeveloper.com/forum/showthread.php?266743-使用Javascript切换Div内容&p=1229155#post1229155
函数showDiv（idInfo）{
var sel=document.getElementById（'divLinks'）.getElementsByTagName（'div'）；
对于（var i=0；i我猜理论上你可以*{display:none；}
隐藏所有内容，然后在接受JS时将其带回来..假设IE版本支持CSS中的通配符（*
）
更新：由于您正在使用标头执行此操作。我将假设它的ID为标头
<div id="header" style="display:none;">CONTENT</div>
<script type="text/javacript">
window.onload = function(){
var h = document.getElementById('header');
h.style.display = 'block';
}
</script>
内容
window.onload=函数（）{
var h=document.getElementById（'header'）；
h、 style.display='block'；
}
所有内容都在正文中。所以正文{display:none；}
。或者直接在html
中。这也可能更有效/更少的负载。谢谢kcdwayne。我会试试。我应该把{display:none；}放在哪里然后在接受javascript后显示更改此项？我假设display:none将出现在主体的开头，然后修改display:property将出现在必须接受的javscript中？？我将display:none；放在主体css的标题中。它现在不会像预期的那样显示任何内容。如何撤消此项满足我的条件（javascript正在运行）以便页面加载？window.onload（function（）{document.getElementByID（'header'）.style.display='block'）