Container div不会集中在IE9中,但会与其他所有浏览器一起工作 [英] Container div won't center in IE9 but will work with every other browser

查看:77
本文介绍了Container div不会集中在IE9中,但会与其他所有浏览器一起工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

,我试图让我的容器div居中在IE9中,它不会工作,我试图寻找解决方案,但找不到任何。这是链接到网站(站点地图页面),这里是我的网站的网站地图页面的HTML:

 < html> 
< head>
< title>网站地图< /标题>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8>
<! - 保存为网页样式(sitemap.psd) - >
< link href =sitemap.css =stylesheettype =text / css>
<! - 结束保存为网页样式 - >
<!DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.1 // ENhttp://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd\">
< script type =text / javascript>
函数MM_swapImgRestore(){//v3.0
var i,x,a = document.MM_sr;对于(i = 0; a&< a.length&(x = a [i])& x.oSrc; i ++)x.src = x.oSrc;
}
函数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;对于(i = 0; i if(a [i] .indexOf(#)!= 0){d.MM_p [j] = new Image; d.MM_p [j ++] .src = a [i];}}
}

函数MM_findObj(n,d){// v4.01
var p,i ,X;如果(!d)d =文档; if((p = n.indexOf(?))> 0&& amp; parent.frames.length){
d = parent.frames [n.substring(p + 1)]。 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]; (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;


函数MM_swapImage(){//v3.0
var i,j = 0,x,a = MM_swapImage.arguments; document.MM_sr = new Array;对于(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( '图像/ template_69.gif', '图像/ template_79.gif', '图像/ template_89.gif', '图像/ template_99.gif', '图像/ template_112.gif','图像/ template_122。 GIF')>
<! - Save for Web Slices(sitemap.psd) - >
< div id =Table_01>
< div id =sitemap-01>
< img src =images / sitemap_01.gifwidth =800height =50alt =>
< / div>
< div id =sitemap-02>
< img src =images / sitemap_02.gifwidth =49height =750alt =>
< / div>
< div id =sitemap-03> < a href =../ index.html>< img src =images / sitemap_03.gifwidth =701height =150alt =>< / a>
< / div>
< div id =sitemap-04>
< img src =images / sitemap_04.gifwidth =50height =659alt =>
< / div>
< div id =sitemap-05>
< img src =images / sitemap_05.gifwidth =1height =600alt =>
< / div>
< div id =sitemap-06>< a href =../ index.htmlonMouseOut =MM_swapImgRestore()onMouseOver =MM_swapImage('Image22','','images /template_69.gif',1)\"><img src =images / sitemap_06.gifwidth =114height =35id =Image22>< / a>< / div>
< div id =sitemap-07>< a href =../ plants / plants.htmlonMouseOut =MM_swapImgRestore()onMouseOver =MM_swapImage('Image221','', 'images / template_79.gif',1)>< img src =images / sitemap_07.gifwidth =105height =35id =Image221>< / a>< DIV>

< a href =../ soils / soils.htmlonMouseOut =MM_swapImgRestore()onMouseOver =MM_swapImage('Image222','', 'images / template_89.gif',1)>< img src =images / sitemap_08.gifwidth =90height =35id =Image222>< / a>< DIV>
< div id =sitemap-09>< a href =../ supplies / supplies.htmlonMouseOut =MM_swapImgRestore()onMouseOver =MM_swapImage('Image223','', 'images / template_99.gif',1)>< img src =images / sitemap_09.gifwidth =128height =35id =Image223>< / a>< DIV>

< div id =sitemap-11>< a href =../ feedback / feedback.htmlonMouseOut =MM_swapImgRestore()onMouseOver =MM_swapImage('Image225','', 'images / template_122.gif',1)>< img src =images / sitemap_11.gifwidth =142height =35id =Image225>< / a>< DIV>
< div id =sitemap-12>
< img src =images / sitemap_12.gifwidth =700height =9alt =>
< / div>
< div id =sitemap-13>
< img src =images / sitemap_13.gifwidth =269height =164alt =>
< / 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.gifwidth =229height =164alt =>
< / div>
< div id =sitemap-16>
< img src =images / sitemap_16.gifwidth =202height =10alt =>
< / div>
< div id =sitemap-17>
< img src =images / sitemap_17.gifwidth =24height =117alt =>
< / div>
< div id =sitemap-18class =textsmall>•< a href =../ index.html>关于< / a>< br>
•< a href =../ plants / plants.html>植物< / a>< br>
•< a href =../ soils / soils.html>土壤< / a> <峰; br>
•< a href =../ supplies / supplies.html>耗材< / a>< br>
•< a href =../ contact / contact.html>联络人< / a>< br>
•< a href =../ feedback / feedback.html>反馈< br>
< / a>< / div>
< div id =sitemap-19>
< img src =images / sitemap_19.gifwidth =19height =117alt =>
< / div>
< div id =sitemap-20>
< img src =images / sitemap_20.gifwidth =188height =301alt =>
< / div>
< div id =sitemap-21>
< img src =images / sitemap_21.gifwidth =365height =274alt =秋天的花园>
< / div>
< div id =sitemap-22>
< img src =images / sitemap_22.gifwidth =147height =301alt =>
< / div>
< div id =sitemap-23>
< div align =center>< span style =font-size:14px;>由Kelsey©< / span>< / div>创建
< / div>
< div id =sitemap-24> < table width =100%height =35border =0cellpadding =0cellspacing =0>
< tr>
< td align =centervalign =middle>< span style =font-size:12px;>卡尔加里,加拿大艾伯塔< / span>< / td>
< / tr>
< / table>

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

现在,此页面的 CSS

  body {
background-color:#1c344c;
background-image:url(图片/ bgcolorr.jpg);
颜色:#287d7d;
font-family:Verdana,Geneva,sans-serif;
font-size:24px;
}
欢迎词{
font-weight:bold;
}
img {border:0;}
img a {outline:none;}
#Table_01 tr td p {
font-family:Verdana,Geneva,无衬线字体;
text-align:center;
}
a:hover {color:lightgreen;}
a {color:green;}
body {
background-color:#1c344c;
background-image:url(图片/ bgcolorr.jpg);
颜色:#287D7D;
font-family:Verdana,Geneva,sans-serif;
font-size:24px;
background-repeat:repeat-x;
}
欢迎词{
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
];
字体大小: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;剩余
:49px;
top:50px;
width:701px;
身高:150px;
}

#sitemap-04 {
position:absolute;剩余
:750px;
top:50px;
宽度:50px;
身高:659px;
}

#sitemap-05 {
position:absolute;剩余
:49px;
top:200px;
width:1px;
身高:600px;
}

#sitemap-06 {
position:absolute;剩余
:50px;
top:200px;
宽度:114px;
身高:35px;
}

#sitemap-07 {
position:absolute;剩余
:164px;
top:200px;
width:105px;
身高:35px;
}

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

#sitemap-09 {
position:absolute;剩余
:359px;
top:200px;
width:128px;
身高:35px;
}

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

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

#sitemap-12 {
position:absolute;剩余
:50px;
top:235px;
width:700px;
身高: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;
宽度:202px;
height:37px;
background-color:#f2f2f2;
}

#sitemap-15 {
position:absolute;
剩余:521px;
top:244px;
宽度:229px;
height:164px;
}

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

#sitemap-17 {
position:absolute;剩余
:319px;
top:291px;
width:24px;
身高:117px;
}

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

#sitemap-19 {
position:absolute;剩余
:502px;
top:291px;
width:19px;
身高:117px;
}

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

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

#sitemap-22 {
position:absolute;剩余
: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;
身高:41px;
background-image:url(images / sitemap_24.gif);
}

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

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

谢谢你们!!

解决方案

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



IE无法找到文件类型所以页面加载到Doc​​ument Mode:Quirks中

如果您将文档模式更改为IE9页面,则显示效果不错。



在这里你可以阅读关于doctype




Hey guys, I'm trying to get my container div to center in IE9 and it won't work, I have tried looking up solutions but cannot find any. Here is the link to the website (sitemap page) and here is the html for my website's sitemap page:

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

Now here is the CSS for this page:

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

thanks guys!!

解决方案

Its because you have not mentioned the DOCTYPE above the HTML.

IE is not able to find type of document so page is loaded in "Document Mode : Quirks"

If you change the Document Mode to IE9 page will look fine.

Its better you add DOCTYPE above the HTML.

here you can read about doctype

这篇关于Container div不会集中在IE9中,但会与其他所有浏览器一起工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆