支持Internet Explorer的css
我的网页有问题,使用除Internet Explorer之外的其他任何浏览器都可以正常浏览。 我已经测试过Mozilla Firefox,Opera,Safari,Torch和Internet Explorer浏览器。 我知道我的CSS出错了,有人可以帮我,这里是html和css文件。
HTML:
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=utf-8' />
<title>|| My Page Tittle ||</title>
<link href='style.css' rel='stylesheet' type='text/css' />
</head>
<body>
<div id='container'>
<div id='header'>
My Header here
</div>
<div id='menu'>
<ul>
<li><a href='#'>My MENU1</a></li>
<li><a href='#'>my MENU2</a></li>
<li><a href='#'>my MENU3</a></li>
<li><a href='#'>my MENU4</a></li>
</ul>
</div>
<div id='content'>
<div id='left'>
<h3>My Header</h3>
<p>My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph
My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph
My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph</p>
</div>
<div id='right'>
<p>Some Stuff will come Here Some Stuff will come Here Some Stuff will come Here</p>
</div>
</div>
<div id='footer'>
<p>And Finally the footer</p>
</div>
</div>
</body>
</html>
CSS:
body {
background: #C89D38;
text-align: justify;
font-family: Arial, Helvetica, sans-serif;
padding: 15px;
font-size: 12px;
margin: 0px;
}
#container {
position: relative;
width: 900px;
margin: auto;
text-align: left;
}
#header {
width: 900px;
height: 100px;
background: #FFFFFF;
margin: auto;
}
#menu {
width: 900px;
margin: auto;
color: #FFFFFF;
background: #303030;
padding: 10px 0px 10px 0px;
font-size: 14px;
}
#menu ul{
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
}
#menu li {
display: inline;
text-align: center;
}
#menu a{
padding: 4px 30px 10px 30px;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
height: 30px;
}
#menu a:hover {
background-color: #C89D38;
color: #303030;
}
#content {
width: 820px;
min-height: 350px;
margin: auto;
float: left;
padding: 40px;
background: #FFFFFF;
border-top: 15px solid #C89D38;
}
#left{
float: left;
width: 590px;
min-height: 350px;
background-color: #EBE8F4;
margin: 10px 0px;
padding: 10px;
}
#right{
float: right;
width: 175px;
min-height: 350px;
background-color: #EBE8F4;
margin: 10px 0px;
padding: 10px;
}
#footer{
width: 900px;
height: 50px;
margin: auto;
padding: 0px;
background: #FFFFFF;
border-top: 15px solid #C89D38;
clear: both;
}
#footer p {
margin: 0px;
padding: 20px 0px 20px 0px;
color: #000000;
text-align:center;
}
这里是通过JSBin http://jsbin.com/udovup/1预览您的网站
现在,除了IE之外,这看起来很好,因为您在<!DOCTYPE html>
的顶部缺少<!DOCTYPE html>
声明。 这将把IE扔进Quirks模式。
因此,将其添加到HTML的顶部
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=utf-8' />
<title>|| My Page Tittle ||</title>
<link href='style.css' rel='stylesheet' type='text/css' />
</head>
.
.
.
</html>
链接地址: http://www.djcxy.com/p/7243.html