过去一周我一直被困在这个问题上，找不到解决方案。我一直在用 chrome 开发我的网站，但注意到边框和轮廓不适用于 IE。我已经尝试替换 html 文档类型和页面的开头，因为其他人已经为他们修复了它，但是它对我不起作用。无论如何，这是我的一个页面的代码:
HTML:
<html>
<head>
<title>Project Star in a Jar</title>
<link rel="stylesheet" type="text/css" href="default.css"/>
</head>
<link rel="shortcut icon" href= "images/favicon.png"/>
<link rel="icon" href="images/favicon.png" type="image/x-icon">
<body>
<div class="wrapOverall">
<div class="header">
<div class="logo">
<img src="images/starJar.png" href="index.php" style="width:100px;height:100px">
<div class="moto">
<h1> Project Star in a Jar</h1>
</div>
</div>
<div class="nav_main">
<ul>
<!--These are all the tabs at the top of the page <li><a href="link">title displayed on page</a></li>-->
<li><a href="index.php">Home</a></li>
<li><a href="tutorial/intro.php">Tutorial</a></li>
<li><a href="videos.php">Videos</a></li>
<li><a href="resources.php">Other Resources</a></li>
</ul>
</div>
</div>
<div class="Content">
<div class="contentResource">
<div class="resourceTitle">
<h2>Resources</h2>
</div>
<div class="resourceLinks">
<div class="webTitle">
<h3>Website Links</h3>
</div>
<ul>
<li><a href="http://www.iter.org" target="_blank">ITER (International Fusion Project)</a></li>
<li><a href="http://www.fusor.net" target="_blank">Fusor.net (Open Source Fusor Research Consortium) </a></li>
<li><a href="http://www.farnovision.com/chronicles/fusion/vassilatos.html" target="_blank">FarnoVision.com (Information About Farnsworth)</a></li>
<li><a href="http://www.kronjaeger.com/hv-old/fusor/fusorIII/index.html#xray" target="_blank">Richard Hulls Fusor III Project (Homebuilt Fusion Project Log)</a></li>
<li><a href="http://www.rtftechnologies.org/physics.htm" target="_blank">RTF Technologies (Several Homebuilt Fusion Projects)</a></li>
<li><a href="http://www.plasma.inpe.br/LAP_Portal/LAP_Site/Text/Fusion_Plasma.htm" target="_blank">Associated Plasma Laboratory (Information About Plasma)</a></li>
</ul>
</div>
<div class="resourceDocs">
<div class="docTitle">
<h3>Documents</h3>
</div>
<ul>
<li><a href="#">PDF Tutorial: Star in a Jar </a></li>
<li><a href="https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0CCIQFjAA&url=http%3A%2F%2Ffusor.net%2Fnewbie%2Ffiles%2FFUSORREF.DOC&ei=ArkkVJ-qN8zgsASw24DABg&usg=AFQjCNGbzj75ePypkL_TZ5u_hwdVceXmMQ&sig2=J4dBsxChmf4L7YWFHs7bSg&bvm=bv.76247554,d.cWc" target="_blank">DOC Fusor & Fusion References (Fusor.net)</a></li>
<li><a href="http://www.fusor.net/newbie/files/Ligon-QED-IE.pdf" target="_blank">PDF The World's Simplest Fusion Reactor, and How to Make it Work</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer">
<a>
Copyright @ 2014 Project Star In A Jar. All Rights Reserved.<br>
Website and Content Created by Joshua Hess <a target="blank" href="http://www.youtube.com/s28400"><u>(s28400)</u></a>
</a>
</div>
</body>
</html>
CSS:
/*########################*/
/* General HTML Tag Rules */
/*########################*/
body {
background-position:top;
background-attachment:fixed;
background-image: url('images/bg.jpg');
background-size: cover;
}
/*##############################*/
/* General Template Class Rules */
/*##############################*/
.wrapOverall {
width: 1100px;
margin-left: auto;
margin-right: auto;
border:2px solid#EE8E08;
background-image: url('images/bg5.jpg');
background-repeat: repeat-y;
}
.logo{
margin-top: -3px;
margin-left: -3px;
}
.logo img {
border:3px solid#EE8E08;
}
.moto{
margin-left: 110px;
margin-top: -120px;
color: #FFFFFF;
text-shadow: 0 0 15px #CC2EFA;
}
.footer {
text-align: center;
margin-top:20px;
font-size:14px;
color: #FFFFFF;
width: 1100px;
margin-left: auto;
margin-right: auto;
}
.footer a {
color: inherit;
text-decoration: none;
}
/*##########################*/
/* General Navigation Rules */
/*##########################*/
.header {
height: 100px;
position: relative;
}
.headerHome {
height: 100px;
padding-bottom: 90px;
position: relative;
}
.nav_main {
margin-top: 10px;
margin-left:96px;
background-color: #D8D8D8;
}
.nav_main ul {
margin:0px;
padding:0px;
padding:5px 18px;
}
.nav_main ul li {
margin:0px;
padding:px;
list-style:none;
display:inline;
}
.nav_main ul li a {
margin:0px;
padding:5px 18px;
color:#000000;
text-decoration:none;
font-weight:900;
font-size:17px;
text-transform:normal;
outline:2px solid#00000;
}
.nav_main ul li a:hover{
text-decoration:underline;
color:#00000;
background-color:#EE8E08;
}
/*############################*/
/* General Resource Formatting*/
/*############################*/
.contentResource {
width:714px;
margin-left: 200px;
text-indent: 50px;
border: 1px solid#FFFFFF;
margin-top:30px;
margin-bottom:30px;
}
.resourceTitle {
text-align: center;
margin-left:-45px;
color: #FFFFFF;
}
.webTitle {
color: #FFFFFF;
}
.docTitle {
color: #FFFFFF;
}
.resourceLinks ul {
list-style: none;
margin-left:-30px;
}
.resourceDocs ul {
list-style: none;
margin-left:-30px;
}
.resourceLinks ul li a {
color:#EE8E08;
}
.resourceDocs ul li a{
color:#EE8E08;
}
最佳答案
在摆弄了一下代码之后，我弄明白了。我在边框实体和颜色代码之间没有空格。
这个:
border: 1px solid#FFFFFF;
需要看起来像这样:
border: 1px solid #FFFFFF;
希望这能帮助遇到同样问题的其他人!
关于html - 轮廓和边框在 IE 中根本不显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26469064/