Question

＆＃13;

h2 {
	text-align: center;
}

.sections {
	border-top: 2px solid black;
	border-bottom: 2px solid black;
	text-align: center;
}

.header {
	border-top: 2px solid black;
}

.other {
	border-top: 2px solid black;
	border-bottom: 2px solid black;
}

body{
	background-color: #e7e7e7;
	border-style: double;
	border-color: #000000;
}

links{
	margin-left:auto;
    margin-right:auto;
}

li {
	list-style-type: none;
	margin: 7px 0;
}	
	
.GEN {
	display: inline-block;
	height: 32px;
	width: 200px;
	background: #767779;
	border: 2.5px solid #000000;
	color: #e7e7e7;
	text-align: center;
	font: bold 1.2em/15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	box-shadow: 0 8px 0 #1b383b;
	text-shadow: 0 2px 2px rgba(255, 255, 255, 0.2);
	border-radius: 50px;
	padding-top: 12px;
}
a.GEN {
	text-decoration: none;
}
.GEN:hover {
	text-decoration: underline;
	color: #000000;
	background-color: lightgrey;
}

.ORACLE {
	display: inline-block;
	height: 34px;
	width: 180px;
	background: #767779;
	border: 2.5px solid #000000;
	color: #e7e7e7;
	text-align: center;
	font: bold 1.3em/17px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	box-shadow: 0 8px 0 #1b383b;
	text-shadow: 0 2px 2px rgba(255, 255, 255, 0.2);
	border-radius: 50px;
	padding-top: 10px;
}
a.ORACLE {
	text-decoration: none;
}
.ORACLE:hover {
	text-decoration: underline;
	color: #000000;
	background-color: lightgrey;
}

.IT {
	display: inline-block;
	height: 32px;
	width: 140px;
	background: #767779;
	border: 2.5px solid #000000;
	color: #e7e7e7;
	text-align: center;
	font: bold 1.3em/16px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	border-radius: 50px;
	padding-top: 12px;
	box-shadow: 0 8px 0 #1b383b;
	text-shadow: 0 2px 2px rgba(255, 255, 255, 0.2);
}
a.IT {
	text-decoration: none;
}
.IT:hover {
	text-decoration: underline;
	color: #000000;
	background-color: lightgrey;
}

.HR {
	display: inline-block;
	height: 34px;
	width: 130px;
	background: #767779;
	border: 2.5px solid #000000;
	color: #e7e7e7;
	text-align: center;
	font: bold 1.2em/16px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	border-radius: 50px;
	padding-top: 12px;
	box-shadow: 0 8px 0 #1b383b;
	text-shadow: 0 2px 2px rgba(255, 255, 255, 0.2);

}
a.HR {
	text-decoration: none;
}
.HR:hover {
	text-decoration: underline;
	color: #000000;
	background-color: lightgrey;
}

.DCTPSL {
	display: inline-block;
	height: 30px;
	width: 240px;
	background: #767779;
	border: 2.5px solid #000000;
	color: #e7e7e7;
	text-align: center;
	font: bold 1.2em/14px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	border-radius: 50px;
	padding-top: 15px;
	box-shadow: 0 8px 0 #1b383b;
	text-shadow: 0 2px 2px rgba(255, 255, 255, 0.2);

}
a.DCTPSL {
	text-decoration: none;
}
.DCTPSL:hover {
	text-decoration: underline;
	color: #000000;
	background-color: lightgrey;
}

.FAC {
	display: inline-block;
	height: 36px;
	width: 190px;
	background: #767779;
	border: 2.5px solid #000000;
	color: #e7e7e7;
	text-align: center;
	font: bold 1.2em/16px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	border-radius: 50px;
	padding-top: 10px;
	box-shadow: 0 8px 0 #1b383b;
	text-shadow: 0 2px 2px rgba(255, 255, 255, 0.2);
}
a.FAC {
	text-decoration: none;
}
.FAC:hover {
	text-decoration: underline;
	color: #000000;
	background-color: lightgrey;
}

.DCTPSS {
	display: inline-block;
	height: 40px;
	width: 200px;
	background: #767779;
	border: 2.5px solid #000000;
	color: #ffffff;
	text-align: center;
	margin: auto;
	font: bold 1.0em/16px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	border-radius: 50px;
	padding-top: 10px;
	box-shadow: 0 8px 0 #1b383b;
	border-color: #00cc00;
	text-shadow: 0 2px 2px rgba(255, 255, 255, 0.2);
}
a.DCTPSS {
	text-decoration: none;
}
.DCTPSS:hover {
	text-decoration: underline;
	background-color: #00cc00;
	color: #000000;
	border-color: #000000;
}

.XER {
	display: block;
	height: 36px;
	width: 200px;
	background: #767779;
	border: 2.5px solid #000000;
	color: #ffffff;
	text-align: center;
	font: bold 1.2em/18px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	border-radius: 50px;
	padding-top: 15px;
	box-shadow: 0 8px 0 #1b383b;
	border-color: red;
	text-shadow: 0 2px 2px rgba(255, 255, 255, 0.2);

}
a.XER {
	text-decoration: none;
}
.XER:hover {
	text-decoration: underline;
	background-color: red;
	color: #000000;
	border-color: #000000;
}

.GSCB {
	display: block;
	height: 40px;
	width: 200px;
	background: #767779;
	border: 2.5px solid #000000;
	color: #ffffff;
	text-align: center;
	font: bold 1.0em/16px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	box-shadow: 0 8px 0 #1b383b;
	text-shadow: 0 2px 2px rgba(255, 255, 255, 0.2);
	border-radius: 50px;
	padding-top: 10px;
	border-color: #ff6600;
}
a.GSCB {
	text-decoration: none;
} 
.GSCB:hover {
	text-decoration: underline;
	background-color: #ff6600;
	color: #000000;
	border-color: #000000;
}

.GSCBPL {
	display: block;
	height: 40px;
	width: 200px;
	background: #767779;
	border: 2.5px solid #000000;
	color: #ffffff;
	text-align: center;
	font: bold 1em/15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	border-radius: 50px;
	padding-top: 10px;
	box-shadow: 0 8px 0 #1b383b;
	border-color: #dea767;
	text-shadow: 0 2px 2px rgba(255, 255, 255, 0.2);
}
a.GSCBPL {
	text-decoration: none;
}
.GSCBPL:hover {
	text-decoration: underline;
	background-color: #dea767;
	color: #000000;
	border-color: #000000;
}

.TTL {
	display: block;
	height: 32px;
	width: 200px;
	background: #767779;
	border: 2.5px solid #000000;
	color: #ffffff;
	text-align: center;
	font: bold 1em/11px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	border-radius: 50px;
	padding-top: 18px;
	box-shadow: 0 8px 0 #1b383b;
	border-color: #0066ff;
	text-shadow: 0 2px 2px rgba(255, 255, 255, 0.2);
}
a.TTL {
	text-decoration: none;
}
.TTL:hover {
	background-color: #0066ff;
	text-decoration: underline;
	color: #000000;
	border-color: #000000;
}

.LAX {
	display: block;
	height: 34px;
	width: 200px;
	background: #767779;
	border: 2.5px solid #000000;
	color: #ffffff;
	text-align: center;
	font: bold 1.1em/13px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	border-radius: 50px;
	padding-top: 14px;	
	box-shadow: 0 8px 0 #1b383b;
	border-color: brown;
	text-shadow: 0 2px 2px rgba(255, 255, 255, 0.2);
}
a.LAX {
	text-decoration: none;
}
.LAX:hover {
	text-decoration: underline;
	background-color: brown;
	color: #000000;
	border-color: #000000;
}

.PSR {
	display: block;
	height: 34px;
	width: 200px;
	background: #767779;
	border: 2.5px solid #000000;
	color: #ffffff;
	text-align: center;
	font: bold 1.2em/15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	border-radius: 50px;
	padding-top: 20px;
	box-shadow: 0 8px 0 #1b383b;
	border-color: #7d26cd;
	text-shadow: 0 2px 2px rgba(255, 255, 255, 0.2);
}
a.PSR {
	text-decoration: none;
}
.PSR:hover {
	text-decoration: underline;
	background-color: #7d26cd;
	color: #ffffff;
	border-color: #000000;
}

.S3UL {
	display: block;
	height: 34px;
	width: 200px;
	background: #767779;
	border: 2.5px solid #000000;
	color: #ffffff;
	text-align: center;
	font: bold 1.1em/15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	border-radius: 50px;
	border-color: #7feaff;
	padding-top: 15px;	box-shadow: 0 8px 0 #1b383b;
	text-shadow: 0 2px 2px rgba(255, 255, 255, 0.2);
}
.S3UL:hover {
	text-decoration: underline;
	background-color: #7feaff;
	color: #000000;
	border-color: #000000;
}
a.S3UL {
	text-decoration: none;
}
 
.S3A {
	display: block;
	height: 34px;
	width: 200px;
	background: #767779;
	border: 2.5px solid #000000;
	color: #ffffff;
	text-align: center;
	font: bold 1.1em/15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	border-radius: 50px;
	padding-top: 15px;
	box-shadow: 0 8px 0 #1b383b;
	border-color: #FFFF6B;
	text-shadow: 0 2px 2px rgba(255, 255, 255, 0.2);
}
.S3A:hover {
	text-decoration: underline;
	background-color: #FFFF6B;
	color: #000000;
	border-color: #000000;
}
a.S3A {
	text-decoration: none;
}


ul.LINKS1 {
	display: inline-block;
	list-style-position: inside;
	font-size: 19px;
	text-align: left;
	overflow:hidden;
}
ul.LINKS2 {
	display: inline-block;
	list-style-position: inside;
	font-size: 19px;
	text-align: left;
	overflow:hidden;
}
ul.LINKS3 {
	display: inline-block;
	list-style-position: inside;
	font-size: 19px;
	text-align: left;
	overflow:hidden;
}

ul.COLUMN1 {
	display: inline-block;
	list-style-position: inside;
	font-size: 19px;
	text-align: left;
	overflow:hidden;
}
ul.COLUMN2 {
	display: inline-block;
	list-style-position: inside;
	font-size: 19px;
	text-align: left;
	overflow:hidden;
}
ul.COLUMN3 {
	display: inline-block;
	list-style-position: inside;
	font-size: 19px;
	text-align: left;
	overflow:hidden;
}	
ul.COLUMN4 {
	display: inline-block;
	list-style-position: inside;
	font-size: 19px;
	text-align: left;
	overflow:hidden;
}
ul.COLUMN5 {
	display: inline-block;
	list-style-position: inside;
	font-size: 19px;
	text-align: left;
	overflow:hidden;
}
ul.COLUMN6 {
	display: inline-block;
	list-style-position: inside;
	font-size: 19px;
	text-align: left;
	overflow:hidden;
}

＆＃13;

<br>
<center><img src="hidden" width="660" height="240"></a></center>
</header>
<center><iframe src="http://free.timeanddate.com/clock/i645j8z3/n78/tlie/fs20/tce7e7e7/pce7e7e7/ftb/pa8/tt0/tm1/td2/th2/tb4" frameborder="0" width="255" height="62"></iframe></center>
<div class="sections">
<center>
<ul class="COLUMN1"><li><a href="" class="GEN">General Links</a></li></ul>
<ul class="COLUMN4"><li><a href="" class="ORACLE">Oracle Links</a></li></ul>
<ul class="COLUMN2"><li><a href="" class="IT">IT Links</a></li></ul>
<ul class="COLUMN3"><li><a href="" class="HR">HR Links</a></li></ul>
<ul class="COLUMN5"><li><a href="" class="DCTPSL">DCTP Systems Links</a></li></ul>
<ul class="COLUMN6"><li><a href="" class="FAC">Facilities Links</a></li></ul>
</center>
</div>
<center>
<h2><u>Quick Links</u></h2>

<ul class="LINKS1">
<li><a href="" class="GSCBPL">A</a></li>
<br><li><a href="" class="GSCB">B</a></li>
<br><li><a href="" class="XER">C</a></li>
</ul>

<ul class="LINKS2">
<li><a href="" class="TTL">D</a></li>
<br><li><a href="" class="PSR">E</a></li>
<br><li><a href="" class="LAX">F</a></li>
</ul>

<ul class="LINKS3">
<li><a href="" class="DCTPSS">G</a></li>
<br><li><a href="" class="S3A">H</a></li>
<br><li><a href="" class="S3UL">I</a></li>
</ul>

<div class="other">
<h2><a href="">More Links</a></h2> 
</div>

<footer>
<p><b><center>If you have any issues with this page, feel free to Contact me</center></b>
<br>

</p>
</footer>
</body>
</html>

＆＃13;

好的，我设计的本地页面将由使用Windows7和Windows10的本地网络上的许多人访问。所有PC都安装了最新版本的IE11。

该页面在Windows 10（IE11和Chrome）上看起来像我想要的那样。但在Windows 7（IE11和Chrome）上看起来完全不同。

非常感谢任何帮助。

提前致谢。

How the page looks on Windows10

How the page looks on Windows7

Answer 1

（抱歉写作答案，我没有足够的声誉发表评论）

你应该把整个HTML代码放在一边，因为它有一些错误（有些标签是打开的，不可能准确地复制它）。另外，我们无法看到您是否使用JavaScript（例如）

还值得问一下如何在本地访问该网站。

我从截图中看到的唯一一件事（可能是被剪切）是iframe没有出现，但我怀疑这会影响网页的CSS。

Answer 2

解决：

<meta http-equiv="X-UA-Compatible" content="IE=11,chrome=1" />

感谢您的帮助

IE11上的CSS输出不同Windows7 vs IE11 Windows10

2 个答案: