以下は、IEではなく、すべてのブラウザーで必要なように機能します。IEでは、コンテンツはメニューの下に表示され、ヘッダーは表示されません。IEでも動作させるのは簡単でしたか？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery-1.8.2.min.js"></script>
<script src="a_script.js"></script>
<link rel="stylesheet" media="all" href="a_css.css">
<link rel="stylesheet" media="all" href="form.css">
<script src="jquery.tipTip.js"></script>
<link rel="stylesheet" media="all" href="tipTip.css">
<title>andierni.ch</title>
</head>
<body>
<header class="shadow">
<hgroup>
<h1>'</h1>
<!--[if lte IE 8]>
<a>Bitte besuchen Sie diese Seite mit einem modernen Browser.</a>
<p>Meine Empfehlung ist Firefox: <a href="http://www.mozilla.org/de/firefox/new/">Mozilla Firefox Download</a></p>
<a>IE Nutzer: Ziehen Sie den Mauszeiger links weg vom Menü, um zum Inhalt zu gelangen.</a>
<![endif]-->
</hgroup>
</header>
<aside>
<p id="home">Home</p>
<p id="blogs">Blogs</p>
<p id="homepages">Homepages</p>
<p id="apps">Mobile Apps</p>
<p id="facebook">Facebook & Co.</p>
<p id="kontakt">Kontakt</p>
</aside>
<div id="content" class="shadow">
<img src="fuss2.png" alt="digital footprint" id="foot">
<article id="welcome">
<h1>andierni.ch</h1>
<br>
<br>
<br>
<h2 id="textcolor">Welcome to my digital footprint!</h2>
<br>
<br>
<p>Diese Seiten geben einen Überblick</p>
<p>über meine Web-Aktivitäten.</p>
</article>
<article id="browser">
<a>Bitte besuchen Sie diese Seite mit einem modernen Browser.</a>
<p>Meine Empfehlung ist Firefox: <a href="http://www.mozilla.org/de/firefox/new/">Mozilla Firefox Download</a></p>
</article>
</div>
<footer>
<p class="copyright">
© 2012 Andreas Erni
</p>
</footer>
</body>
</html>
そしてここにCSS：
body {
font-family: sans-serif;
font-size: 130%;
width: 90%;
margin: auto;
background-color: #EEE;
}
header, aside, #content, footer {
background-color: #FFF;
}
/* display: block for new elements
not needed for browsers supporting them
*/
header, hgroup, article, aside, section, nav, footer {
display: block;
}
header {
margin: 10px 0px 3px 0px;
border: 1px solid #CCC;
padding-left: 10px;
}
header img {
float: left;
padding: 5px;
width: 20%;
height: 20%;
}
header h1 {
margin: 10px 0px 10px 0px;
}
aside {
border: 1px solid #CCC;
float: left;
width: 17%;
font-size: 0.9em;
padding: 10px 10px 10px 10px;
}
#content {
border: 1px solid #CCC;
float: right;
width: 80%;
margin-bottom: 3px;
line-height: 0.3em;
}
#content h2 {
font-size: large;
}
#content h3 {
font-size: small;
}
#content p, a {
font-size: smaller;
}
article {
padding: 0px 10px 0px 20px;
display: block;
}
article img {
float: left;
padding: 0px 10px 10px 0px;
}
article p, a {
text-align: left !important;
line-height: 1em !important;
}
footer {
background-color: #EEE;
width: 100%;
text-align: left;
font-size: 0.8em;
}
footer .copyright {
float: left;
margin-top: 3px;
padding-left: 3px;
font-size:0.9em;
color:#666;
}
.shadow {
-moz-box-shadow: 4px 0px 10px -3px silver;
-webkit-box-shadow: 4px 0px 10px -3px silver;
box-shadow: 4px 0px 10px -3px silver;
}
section {
display: block;
line-height: 1em;
}
section h1 {
padding: 20px;
margin-top: 10px !important;
}
.hover {
color: royalblue;
}
.tag {
float: right;
padding-left: 3px;
}
p, a {
line-height: 1.0em !important;
}
.abstand {
line-height: 1em;
}
.empty{
color: white;
}
#foot {
float: right;
margin-top: 50px;
margin-right: 50px;
}
#browser {
display: inline-block;
vertical-align: bottom;
}
#welcome{
float: left;
margin-top: 40px;
}
#welcomeB{
float: left !important;
}
#textcolor {
color: olivedrab;
}
header {
background: url("pA7.png");
background-color: white;
}
hgroup h1 {color: white;}
助けていただければ幸いです。ありがとう、アンディ
