有一段CSS代码,用于实现文本居中
.text {
bottom: 0;
position: absolute;
left: 0;
right: 0;
text-align: center; }
在FF,Chrome浏览器显示正常,但在IE6中文本不再居中,而是左对齐,请问要怎么样修改代码,才能在IE6中也实现文本居中
------解决方案--------------------
margin:0 auto;
文件头加:
<!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">
------解决方案--------------------
把html 贴出来
------解决方案--------------------
#header #nav li a .text 加个
width:100%;
------解决方案--------------------
你可以先进行浏览器判断,再写不同的CSS,在使用不同的Style
------解决方案--------------------
在
#header #nav li a .text 里面写上 width: 90px; 没宽度你写居中当然没用。 另代码写的太差了。。一个样式里面4个display 。 定位有 right:0 left:0 那他到底是left 还是right呢 。<span>这个元素完全可以去掉。。建议效果实现后 优化下代码
------解决方案--------------------
- HTML code
<!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" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>test</title> <style type="text/css"> *{ margin:0; padding:0;} html { color: #000; background: #fff; } body, div { margin: 0; padding: 0; } li { list-style: none; } a, a:visited { color: #222222; text-decoration: none; } a:hover, a:active { color: #0066CC; text-decoration: none; } ul { margin-bottom: 14px; } body { background: #f6f6f6; /* 页眉部分的背景 */ color: #222222; font-size: 12px; font-family: helvetica, arial, sans-serif; line-height: 1.5; min-width: 960px; } #container { width: 100%; } /* 头部页眉 导航 */ #header_wrapper { border-bottom: 1px solid #e47a04; min-width: 950px; padding: 0 5px; } #header { height: 110px; margin: auto; width: 950px; } #header #iw_logo { background: #e47a04; display: block; height: 80px; width: 277px; float:left; line-height:999px; overflow:hidden; } #header #nav { font-size: 12px; height: 55px; } #header #nav li { border-right: 1px solid #dddddd; float:left; text-align:center; line-height:55px; } #header #nav li.last { border: none; } #header #nav li a { display: block; height: 55px; position: relative; width: 90px; } #header #nav li #nav_home { border-left: 1px solid #dddddd; } </style> </head> <body class="home blog"> <div id="container"> <!-- Header --> <div id="header_wrapper"> <div id="header"> <div><a href="" id="iw_logo">logo</a></div> <ul id="nav" role="navigation"> <li id="first-child"><a href="" id="nav_home">首 页</a></li> <li><a href="" id="nav_about">关于我们</a></li> <li><a href="" id="nav_incubation">公司产品</a></li> <li><a href="" id="nav_recruit">售前服务</a></li> <li><a href="" id="nav_portfolio">解决方案</a></li> <li><a href="" id="nav_iwdf">售后服务</a></li> </ul> </div> </div> <!-- Header end--> </div> </BODY> </HTML>