0
我是新來的使用CSS，並有舊HTML的經驗，上次我設計的網站是在2002年。 所以我一直在設計一個新的個人網站過去幾天沒有一個問題，直到我嘗試在Internet Explorer中查看我的網站（8 & 9）。 經過整整兩天尋找答案，我決定尋求幫助。該網站在Firefox和Chrome瀏覽器中的預期目標，我剛剛把我的頭髮撕掉了。我唯一知道的就是添加！doctype在ie9和ff中都打破它。 我希望讓更有經驗的人看看我的代碼。 希望儘快閱讀回覆。另一個居中的div對齊問題
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;
}
很抱歉的大交^^不知道你需要什麼樣的信息。
佈局究竟有什麼問題？我試過打開你的網站，它在IE9，Firefox和Chrome上看起來和我一樣。 IE8看起來相似，但沒有沿着邊緣的陰影。你能提供更多的細節嗎？ 由於您使用了我們無法訪問的相關引用，因此您網站的鏈接也可能會有所幫助。 – DRobinson 2012-02-11 17:04:56
我的歉意，我拍了2張截圖; http://imageshack.us/photo/my-images/843/website1.jpg/ - 應該是什麼樣子。 http://imageshack.us/photo/my-images/85/website2n.jpg/ - 它看起來像什麼時候看起來像當我添加！doctype，當我打開它在ie9中有或沒有！doctype。 – Malchion 2012-02-11 17:19:21