IE下为何不居中？如何弄都不能居中
日期：2014-05-16 浏览次数：20703 次
IE下为何不居中？怎么弄都不能居中
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" />
<title>水平导航条(DIV+CSS)</title>
<style type="text/css">
body{
background: #FFF;/*背景属性*/
font-family: Arial, Helvetica, sans-serif;/*字体备用*/
color: #555555;/*颜色*/
padding: 0px;/*内边距：按上右下左排序*/
margin: 5px;/*外边距：按上右下左排序*/
width: 100%;/*宽度*/
/*文本对齐方式：left把文本排列到左边。默认值：由浏览器决定。right把文本排列到右边。center把文本排列到中间。justify实现两端对齐文本效果。inherit规定应该从父元素继承 text-align 属性的值。*/
font-size: 9pt;/*字体大小*/
}
#nav{
font-size: 20px;/*字体的尺寸*/
font-family: Arial, Helvetica, sans-serif;/*字体备用*/
margin:50px auto;/*外边距：按上右下左排序 auto：表示随着浏览器的兼容性来自动调整数值、边距、填充、还有对齐方式等等，不同的浏览器有不同的自动适应效果。
*/
text-align: center;
}
#nav ul{
margin: 0px;/*外边距：按上右下左排序*/
padding: 0px;/*内边距：按上右下左排序*/
list-style-type: none;/*列表格式：无*/
margin:0 auto;
}
#nav li{
float: left;/*决定浮动方向。left元素向左浮动。right元素向右浮动。none默认值。元素不浮动，并会显示在其在文本中出现的位置。
规定应该从父元素继承 float 属性的值。*/
}
#nav li a{
text-decoration: none;/*文本的修饰方法*/
color: #ffffff; /*颜色*/
background: url(1.jpg) no-repeat 0px 0px;/*背景属性*/
width: 150px;/*宽度*/
line-height: 49px;/*高度*/
display: block;/*规定元素应该生成的框的类型*/
}
#nav li a:hover{
color: #ffffff; /*颜色*/
background: url(1.jpg) no-repeat 0px -50px; /*背景属性 no-repeat背景像素*/
}
</style>
</head>
<body>
<div id="nav" margin: 0 auto>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/service/ad.shtml">About us</a></li>
<li><a href="/sort/list_1_1.shtml">Products</a></li>
<li><a href="/sort/list_2_1.shtml">ASP Codes</a></li>
<li><a href="/sort/list_2_1.shtml">PHP Codes</a></li>
<li><a href="/sort/list_11_1.shtml">Ajax Codes</a></li>
<li><a href="/sort/index.shtml">Services</a></li>
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" />
<title>水平导航条(DIV+CSS)</title>
<style type="text/css">
body{
background: #FFF;/*背景属性*/
font-family: Arial, Helvetica, sans-serif;/*字体备用*/
color: #555555;/*颜色*/
padding: 0px;/*内边距：按上右下左排序*/
margin: 5px;/*外边距：按上右下左排序*/
width: 100%;/*宽度*/
/*文本对齐方式：left把文本排列到左边。默认值：由浏览器决定。right把文本排列到右边。center把文本排列到中间。justify实现两端对齐文本效果。inherit规定应该从父元素继承 text-align 属性的值。*/
font-size: 9pt;/*字体大小*/
}
#nav{
font-size: 20px;/*字体的尺寸*/
font-family: Arial, Helvetica, sans-serif;/*字体备用*/
margin:50px auto;/*外边距：按上右下左排序 auto：表示随着浏览器的兼容性来自动调整数值、边距、填充、还有对齐方式等等，不同的浏览器有不同的自动适应效果。
*/
text-align: center;
}
#nav ul{
margin: 0px;/*外边距：按上右下左排序*/
padding: 0px;/*内边距：按上右下左排序*/
list-style-type: none;/*列表格式：无*/
margin:0 auto;
}
#nav li{
float: left;/*决定浮动方向。left元素向左浮动。right元素向右浮动。none默认值。元素不浮动，并会显示在其在文本中出现的位置。
规定应该从父元素继承 float 属性的值。*/
}
#nav li a{
text-decoration: none;/*文本的修饰方法*/
color: #ffffff; /*颜色*/
background: url(1.jpg) no-repeat 0px 0px;/*背景属性*/
width: 150px;/*宽度*/
line-height: 49px;/*高度*/
display: block;/*规定元素应该生成的框的类型*/
}
#nav li a:hover{
color: #ffffff; /*颜色*/
background: url(1.jpg) no-repeat 0px -50px; /*背景属性 no-repeat背景像素*/
}
</style>
</head>
<body>
<div id="nav" margin: 0 auto>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/service/ad.shtml">About us</a></li>
<li><a href="/sort/list_1_1.shtml">Products</a></li>
<li><a href="/sort/list_2_1.shtml">ASP Codes</a></li>
<li><a href="/sort/list_2_1.shtml">PHP Codes</a></li>
<li><a href="/sort/list_11_1.shtml">Ajax Codes</a></li>
<li><a href="/sort/index.shtml">Services</a></li>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
