我是新手使用CSS并且有使用旧HTML的经验，上次我在2002年设计了一个网站。 所以我在过去的几天里一直在设计一个新的个人网站，直到我尝试在Internet Explorer（8＆amp; 9）中查看我的网站。 经过2天的寻找答案，我决定寻求帮助。该网站在Firefox和Chrome中看起来像预期的那样，我刚刚将头发撕裂了。我唯一知道的是添加！doctype在ie9和ff中打破它。 我希望有一个更有经验的人看看我的代码。 希望尽快阅读回复。
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<HEAD>
<meta http-equiv="X-UA-Compatible" content="IE=9" >
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<!-- Nivo Slider Theme loading -->
<link rel="stylesheet" href="themes/sarrus/sarrus.css" type="text/css" media="screen"/>
<TITLE>Sarrus Design Works</TITLE>
<!-- Layout CSS Link -->
<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
</HEAD>
<BODY>
<div id="wrapper">
<div id="header" class="gradient">
<img style="border:solid 2px #202020;" src="img/sdw-logo.jpg">
</div>
<!-- Nivo Slider Body attachment -->
<div id="content">
<div class="slider-wrapper theme-sarrus">
<!-- Add div class="ribbon" if theme contains ribbon -->
<div id="slider" class="nivoSlider">
<img src="img/slider1.jpg" alt=""/>
<img src="img/slider2.jpg" alt=""title="#htmlcaption" />
<img src="img/slider3.jpg" alt=""title="This is an example of a caption" />
<img src="img/slider4.jpg" alt=""/>
</div>
</div>
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>
<div id="content2">
</div>
<div id="details">
All artwork is copyright of Mike Williams. Fanart original characters are copyright belonging to their respective owner.
</div>
</div>
</BODY>
<!-- place scripts here -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect:'fade', // Specify sets like: 'fold,fade,sliceDown'
animSpeed:1000, // Slide transition speed
pauseTime:6000, // How long each slide will show
startSlide:0, // Set starting Slide (0 index)
directionNav:true, // Next & Prev navigation
directionNavHide:true, // Only show on hover
controlNav:true, // 1,2,3... navigation
controlNavThumbs:false, // Use thumbnails for Control Nav
controlNavThumbsFromRel:false, // Use image rel for thumbs
controlNavThumbsSearch: '.jpg', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav:true, // Use left & right arrows
pauseOnHover:false, // Stop animation while hovering
manualAdvance:false, // Force manual transitions
captionOpacity:0.7, // Universal caption opacity
prevText: 'Prev', // Prev directionNav text
nextText: 'Next' // Next directionNav text
});
});
</script>
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
</HTML>
和CSS
html {
height: 100%;
font-family:arial;
}
body {
text-align: center;
marginleft: ;
background-repeat: no-repeat;
padding:0;
background: #ffffff;
background: -moz-linear-gradient(top, rgba(136,110,191,0.76) 2%, rgba(136,110,191,0) 54%, rgba(136,110,191,0) 67%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgba(136,110,191,0.76)), color-stop(54%,rgba(136,110,191,0)), color-stop(67%,rgba(136,110,191,0)), color-stop(100%,rgba(0,0,0,0)));
background: -webkit-linear-gradient(top, rgba(136,110,191,0.76) 2%,rgba(136,110,191,0) 54%,rgba(136,110,191,0) 67%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(top, rgba(136,110,191,0.76) 2%,rgba(136,110,191,0) 54%,rgba(136,110,191,0) 67%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(top, rgba(136,110,191,0.76) 2%,rgba(136,110,191,0) 54%,rgba(136,110,191,0) 67%,rgba(0,0,0,0) 100%);
background: linear-gradient(top, rgba(136,110,191,0.76) 2%,rgba(136,110,191,0) 54%,rgba(136,110,191,0) 67%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c2886ebf', endColorstr='#00000000',GradientType=0 );
}
* {margin:0; padding:0;}
/* ----- Nivo Slider Settings ---- */
.nivoSlider {
background:url(img/loading.gif) no-repeat 50% 50%;
}
.nivoSlider img {
position:absolute;
display:none;
}
.nivoSlider a {
border:0;
display:block;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
}
/* Caption styles */
.nivo-caption {
position:absolute;
text-align:left;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.8; /* Overridden by captionOpacity setting */
width:100%;
z-index:8;
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
position:relative;
z-index:9;
}
.nivo-controlNav a.active {
font-weight:bold;
}
#Wrapper {
text-align:left;
width: 850px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#header {
position:relative;
z-index:50;
width:120px;
height:170px;
margin-left:30px;
border:solid 1px #404040;
-webkit-box-shadow: 3px 3px 4px 0px #404040;
-moz-box-shadow: 3px 3px 4px 0px #404040;
box-shadow: 3px 3px 4px 0px #404040;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
background: rgb(125,126,125);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkN2U3ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwZTBlMGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1)));
background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: -o-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: -ms-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 );
}
#slider {
margin: 0 auto;
width:846;
height:433;
}
#content {
border:1px solid #b4b4b4;
padding:5px;
z-index:1;
width:100%;
margin-top:-85px;
background-color:#e9e9e9;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 3px 3px 4px 0px #404040;
-moz-box-shadow: 3px 3px 4px 0px #404040;
box-shadow: 3px 3px 4px 0px #404040;
}
#content2 {
border:1px solid #b4b4b4;
padding:5px;
z-index:1;
width:100%;
height:200px;
background-color:#E9E9E9;
margin-top:10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 3px 3px 4px 0px #404040;
-moz-box-shadow: 3px 3px 4px 0px #404040;
box-shadow: 3px 3px 4px 0px #404040;
}
#details {
padding:6px;
width:100%;
text-align:center;
font-color:#b4b4b4;
font-filter:soft;
font-size:8px;
}
很抱歉这个大帖子^^不确定你需要什么信息。
答案 0 :(得分：0)
看起来.nivo-caption的宽度基于body，因为它的父母都没有position: relative。
您是否可以将position: relative设置为.nivo-slider元素？