-2

在所有浏览器中都可以按照我想要的方式进行操作,但在 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">
&copy; 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;}

将不胜感激任何帮助。谢谢,安迪

4

3 回答 3

1

对于 IE8,你需要一个 html5shiv。

http://code.google.com/p/html5shiv/

于 2012-12-01T22:01:08.500 回答
1

IE8 及更早版本不支持 HTML5 标签,默认无法正常显示。

解决方案是一个名为html5Shiv的 Javascript hack 。此 hack 修复了旧 IE 版本中 HTML5 元素的显示问题,以及与它们一起出现的一些其他小错误。

您可能还想尝试Modernizr脚本。这是一个更大的 javascript 工具,它包含 htm5Shiv 功能,但也提供 JS 和 CSS 挂钩,让您的代码知道用户浏览器支持哪些 HTML5 功能。

这个 javascript 解决方案是解决旧 IE 版本中 HTML5 显示问题的唯一已知方法。这意味着您不能为禁用 Javascript 的 IE8 用户支持 HTML5 标签。

于 2012-12-01T22:05:10.970 回答
0

IE 和 firefox 在您的代码上几乎给出了相同的结果。

试试这个:通过十个步骤学习 CSS 定位
http://www.barelyfitz.com/screencast/html-training/css/positioning/

IE9: IE9

火狐16: 火狐16

于 2012-12-01T21:55:48.500 回答