css - 另一个居中 div 对齐问题

标签 css internet-explorer-9 html

我是 CSS 的新手，对旧的 HTML 有经验，我上次设计网站是在 2002 年。 所以过去几天我一直在设计一个新的个人网站，直到我尝试在 Internet Explorer(8 和 9)中查看我的网站。 经过整整 2 天的寻找答案后，我决定寻求帮助。该网站在 Firefox 和 Chrome 中看起来像预期的那样，我一直在为它撕毁我的头发。我唯一确定的是在 ie9 和 ff 中添加 !doctype 会破坏它。 我很想让更有经验的人看看我的代码。 希望尽快收到回复。

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;
}

抱歉，关于大帖子 ^^ 不确定您需要什么信息。

最佳答案

看起来 .nivo-caption 正在根据 body 获取其宽度，因为它的父级都没有 position: relative。 您是否可以将 position: relative 设置为 .nivo-slider 元素？

关于css - 另一个居中 div 对齐问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9242011/

上一篇：jquery - 为什么 rgb CSS 函数在 jQuery 1.7.1 中不再起作用？

下一篇：html - 如何使 y 轴滚动 DIV 的滚动条出现在右侧而不是左侧

相关文章：

jquery - 一个组件在使用 jquery fadeIn() 后改变了它的位置

html - 垂直居中一个元素

css - IE + cufon 中的不透明度

com - 如何把IE9的WebBrowser控件纳入标准？

JavaScript 将文本写入图像

javascript - 仅在 Internet Explorer 中存在文本重叠问题

html - 在 div 和 h1 上设置字体大小的区别

xml - 如果 XML 是本地的而 XSL 在远程服务器上，IE9 和 Chrome 不会使用 XSL 呈现 XML

javascript - 用于打印的 HTML 自动分页符

javascript - 如何使用 { 对列表进行分组

©2024 IT工具网  联系我们