容器div不会在IE9中居中,但可以与其他浏览器一起使用

时间:2013-10-17 03:10:51

标签: javascript jquery css html

嘿伙计们,我正试图让我的容器div在IE9中居中并且它不起作用,我尝试查找解决方案但找不到任何解决方案。这是网站的link(网站地图页面),这是我网站的网站地图页面的html:

    <html>
<head>
<title>sitemap</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- Save for Web Styles (sitemap.psd) -->
<link href="sitemap.css" rel="stylesheet" type="text/css">
<!-- End Save for Web Styles -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

</script>
</head>
<body style="background-color:#1c344c; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;" onLoad="MM_preloadImages('images/template_69.gif','images/template_79.gif','images/template_89.gif','images/template_99.gif','images/template_112.gif','images/template_122.gif')">
<!-- Save for Web Slices (sitemap.psd) -->
<div id="Table_01">
    <div id="sitemap-01">
        <img src="images/sitemap_01.gif" width="800" height="50" alt="">
    </div>
    <div id="sitemap-02">
        <img src="images/sitemap_02.gif" width="49" height="750" alt="">
    </div>
    <div id="sitemap-03"> <a href="../index.html"><img src="images/sitemap_03.gif" width="701" height="150" alt=""></a>
    </div>
    <div id="sitemap-04">
        <img src="images/sitemap_04.gif" width="50" height="659" alt="">
    </div>
    <div id="sitemap-05">
        <img src="images/sitemap_05.gif" width="1" height="600" alt="">
    </div>
    <div id="sitemap-06"><a href="../index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image22','','images/template_69.gif',1)"><img src="images/sitemap_06.gif" width="114" height="35" id="Image22"></a></div>
    <div id="sitemap-07"><a href="../plants/plants.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image221','','images/template_79.gif',1)"><img src="images/sitemap_07.gif" width="105" height="35" id="Image221"></a></div>
    <div id="sitemap-08"><a href="../soils/soils.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image222','','images/template_89.gif',1)"><img src="images/sitemap_08.gif" width="90" height="35" id="Image222"></a></div>
    <div id="sitemap-09"><a href="../supplies/supplies.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image223','','images/template_99.gif',1)"><img src="images/sitemap_09.gif" width="128" height="35" id="Image223"></a></div>
    <div id="sitemap-10"><a href="../contact/contact.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image224','','images/template_112.gif',1)"><img src="images/sitemap_10.gif" width="121" height="35" id="Image224"></a></div>
    <div id="sitemap-11"><a href="../feedback/feedback.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image225','','images/template_122.gif',1)"><img src="images/sitemap_11.gif" width="142" height="35" id="Image225"></a></div>
    <div id="sitemap-12">
        <img src="images/sitemap_12.gif" width="700" height="9" alt="">
    </div>
    <div id="sitemap-13">
        <img src="images/sitemap_13.gif" width="269" height="164" alt="">
    </div>
    <div id="sitemap-14"><span style="font-size:19px; letter-spacing:4px;"><strong>Sitemap</strong></span></div>
    <div id="sitemap-15">
        <img src="images/sitemap_15.gif" width="229" height="164" alt="">
    </div>
    <div id="sitemap-16">
        <img src="images/sitemap_16.gif" width="202" height="10" alt="">
    </div>
    <div id="sitemap-17">
        <img src="images/sitemap_17.gif" width="24" height="117" alt="">
    </div>
    <div id="sitemap-18" class="textsmall">• <a href="../index.html">About</a><br>
        • <a href="../plants/plants.html">Plants</a><br>
        • <a href="../soils/soils.html">Soils</a> <br>
        • <a href="../supplies/supplies.html">Supplies</a><br>
        • <a href="../contact/contact.html">Contact</a><br>
      • <a href="../feedback/feedback.html">Feedback<br>
      </a></div>
    <div id="sitemap-19">
        <img src="images/sitemap_19.gif" width="19" height="117" alt="">
    </div>
    <div id="sitemap-20">
        <img src="images/sitemap_20.gif" width="188" height="301" alt="">
    </div>
    <div id="sitemap-21">
        <img src="images/sitemap_21.gif" width="365" height="274" alt="A garden in the Fall">
    </div>
    <div id="sitemap-22">
        <img src="images/sitemap_22.gif" width="147" height="301" alt="">
    </div>
    <div id="sitemap-23">
      <div align="center"><span style="font-size: 14px;">Created by Kelsey©</span></div>
    </div>
    <div id="sitemap-24">     <table width="100%" height="35" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td align="center" valign="middle"><span style="font-size: 12px;">Calgary, Alberta, Canada</span></td>
        </tr>
      </table>

    </div>
    <div id="sitemap-25">
        <img src="images/sitemap_25.gif" width="49" height="91" alt="">
    </div>
    <div id="sitemap-26">
        <img src="images/sitemap_26.gif" width="701" height="50" alt="">
    </div>
</div>
<!-- End Save for Web Slices -->
</body>
</html>

现在这是此页面的 CSS

body {
    background-color: #1c344c;
    background-image: url(Images/bgcolorr.jpg);
    color: #287d7d;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 24px;
}
Welcomee {
    font-weight: bold;
}
img {border : 0;}
img a {outline : none;}
#Table_01 tr td p {
    font-family: Verdana, Geneva, sans-serif;
    text-align: center;
}
a:hover {color: lightgreen;}
a {color: green;}
body {
    background-color: #1c344c;
    background-image: url(Images/bgcolorr.jpg);
    color: #287D7D;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 24px;
    background-repeat: repeat-x;
}
Welcomee {
    font-weight: bold;
}
#Table_01 tr td p {
    font-family: Verdana, Geneva, sans-serif;
    text-align: center;
}
.textsmall {
    font-size: 14px;
}
.textsmall1 {
    font-size: 13
];
    font-size: 14px;
}
img {border: none; }
a img {border: 0px; }

#Table_01 {
    position:relative;
    width:800px;
    height:800px;
    margin-left:auto;
    margin-right:auto;
}

#sitemap-01 {
    position:absolute;
    left:0px;
    top:0px;
    width:800px;
    height:50px;
}

#sitemap-02 {
    position:absolute;
    left:0px;
    top:50px;
    width:49px;
    height:750px;
}

#sitemap-03 {
    position:absolute;
    left:49px;
    top:50px;
    width:701px;
    height:150px;
}

#sitemap-04 {
    position:absolute;
    left:750px;
    top:50px;
    width:50px;
    height:659px;
}

#sitemap-05 {
    position:absolute;
    left:49px;
    top:200px;
    width:1px;
    height:600px;
}

#sitemap-06 {
    position:absolute;
    left:50px;
    top:200px;
    width:114px;
    height:35px;
}

#sitemap-07 {
    position:absolute;
    left:164px;
    top:200px;
    width:105px;
    height:35px;
}

#sitemap-08 {
    position:absolute;
    left:269px;
    top:200px;
    width:90px;
    height:35px;
}

#sitemap-09 {
    position:absolute;
    left:359px;
    top:200px;
    width:128px;
    height:35px;
}

#sitemap-10 {
    position:absolute;
    left:487px;
    top:200px;
    width:121px;
    height:35px;
}

#sitemap-11 {
    position:absolute;
    left:608px;
    top:200px;
    width:142px;
    height:35px;
}

#sitemap-12 {
    position:absolute;
    left:50px;
    top:235px;
    width:700px;
    height:9px;
    background-image:url(images/sitemap_12.gif);
}

#sitemap-13 {
    position:absolute;
    left:50px;
    top:244px;
    width:269px;
    height:164px;
}

#sitemap-14 {
    position:absolute;
    left:319px;
    top:244px;
    width:202px;
    height:37px;
    background-color:#f2f2f2;
}

#sitemap-15 {
    position:absolute;
    left:521px;
    top:244px;
    width:229px;
    height:164px;
}

#sitemap-16 {
    position:absolute;
    left:319px;
    top:281px;
    width:202px;
    height:10px;
    background-image:url(images/sitemap_16.gif)
}

#sitemap-17 {
    position:absolute;
    left:319px;
    top:291px;
    width:24px;
    height:117px;
}

#sitemap-18 {
    position:absolute;
    left:343px;
    top:291px;
    width:159px;
    height:117px;
    background-color:#f2f2f2;
}

#sitemap-19 {
    position:absolute;
    left:502px;
    top:291px;
    width:19px;
    height:117px;
}

#sitemap-20 {
    position:absolute;
    left:50px;
    top:408px;
    width:188px;
    height:301px;
}

#sitemap-21 {
    position:absolute;
    left:238px;
    top:408px;
    width:365px;
    height:274px;
}

#sitemap-22 {
    position:absolute;
    left:603px;
    top:408px;
    width:147px;
    height:301px;
}

#sitemap-23 {
    position:absolute;
    left:238px;
    top:682px;
    width:365px;
    height:27px;
    background-color:#f2f2f2;
}

#sitemap-24 {
    position:absolute;
    left:50px;
    top:709px;
    width:701px;
    height:41px;
    background-image: url(images/sitemap_24.gif);
}

#sitemap-25 {
    position:absolute;
    left:751px;
    top:709px;
    width:49px;
    height:91px;
}

#sitemap-26 {
    position:absolute;
    left:50px;
    top:750px;
    width:701px;
    height:50px;
}

谢谢你们!

1 个答案:

答案 0 :(得分:1)

因为你没有在HTML上面提到过DOCTYPE。

IE无法找到文档类型,因此在“文档模式:怪癖”中加载了页面

如果您将文档模式更改为IE9页面看起来不错。

最好在HTML上添加DOCTYPE。

here you can read about doctype

enter image description here