Container div不会集中在IE9中,但会与其他所有浏览器一起工作 [英] Container div won't center in IE9 but will work with every other browser
问题描述
< html>
< script type =text / javascript>
< 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\">
函数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; iif(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无法找到文件类型所以页面加载到Document Mode:Quirks中
如果您将文档模式更改为IE9页面,则显示效果不错。
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屋!
查看全文