高分求解，刚用div+css做了一个页面，在ie7下正常显示，但是用ie6打开就变形了，哪位高手能帮我看下啊

时间：2022-11-03 15:37:07
刚用div+css做了一个页面，在ie7下正常显示，但是用ie6打开就变形了，哪位高手能帮我看下啊，详细代码如下，附件已经上传到纳米盘（论坛里上传不知道为什么，试了好多次都没成功） head.rar  
http://www.namipan.com/d/head.rar/2059524990ddadde0ac9ca139ec1a2670dc2d8c7c0020200 


<!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" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<style type="text/css">

<!--

Body {

    margin:0px;

    padding:0px;

    text-align:center;

    background-color:#F2F8FF;

    background-image:url(newImg/bg.jpg);

    background-repeat:repeat-y;

    background-position:center;

}

Body, Div {

    font-size:12px;

    color:#000000;

    font-family:"宋体";

}

#Body_Top {

    width:980px;

    height:101px;

}

#Body_TopNav {

    width:980px;

    height:28px;

    background-color:#2FAFE9;

}

#Body_TopNav_leftDIV{

    margin:6px 0px 0px 20px;

    float:left;

    color:#FFFFFF;

    font-size:14px;

    font-weight:bold;

}

#Body_TopNav_RightDIV{

    margin:3px 20px 0px 00px;

    float:right;

    color:#FFFFFF;

    font-size:14px;

}

#Body_TopNav_RightDIV span{

    vertical-align:top;

}

#Body_SPX{

    width:980px;

    height:15px;

    background-image:url(newImg/HpxBG.jpg);

    background-repeat:repeat-x;

}

#Body_Txt1{

    width:980px;

    height:290px;

}

#Body_Txt1_L1{

    float:left;

    width:255px;

    height:255px;

    margin-top:15px;

    margin-left:12px;

    padding-top:14px;

    background-image:url(newImg/loginBG.jpg);

    background-repeat:no-repeat;

    text-align:center;

}

#Body_Txt1_L1_S{

    width:210px;

    text-align:left;

    background-color:#D1EAF6;

    padding:8px 0px 8px 8px;

    border-bottom:3px #085EB0 solid;

}

#Body_Txt1_L1_X{

    width:218px;

    height:170px;

    background-color:#FFFFFF;

    background-image:url(newImg/LoginXBG.jpg);

    background-repeat:repeat-x;

}

#Body_Txt1_L1_X_Input{

    width:200px;

    margin-top:25px;

    font-weight:bold;

    color:#085EB0;

}

#Body_Txt1_Z1{

    float:left;

    width:435px;

    height:279px;

    margin:2px 0px 0px 5px;

}

#Body_Txt1_Z1_S{

    text-align:left;

    padding-left:8px;

}

#Body_Txt1_Z1_X{

    width:435px;

    height:240px;

    margin-top:3px;

    background-color:#FFFFFF;

    background-image:url(newImg/XINWENBG.jpg);

    background-repeat:no-repeat;

}

#Body_Txt1_Z1_X_L{

    width:276px;

    height:194px;

    float:left;

    margin:14px 0px 0px 12px;

    background-color:#00FFFF;

}

#Body_Txt1_Z1_X_R{

    width:128px;

    height:180px;

    float:left;

    margin:14px 0px 0px 6px;

    background-color:#CCFF00;

}

#Body_Txt1_R1{

    float:left;

    width:252px;

    margin:2px 0px 0px 8px;

}

#Body_Txt1_R1_S{

    text-align:left;

    padding:0px 0px 5px 8px;

    border-bottom:4px #085EB0 solid;

}

#Body_Txt1_R1_Z{

    width:252px;

    height:200px;

    background-color:#00CCCC;

}

#Body_txt1_R1_X{

    text-align:right;

    padding-top:10px;

}

#Body_Txt2{

    width:980px;

    height:235px;

}

#Body_Txt2_L1{

    float:left;

    width:330px;

    height:210px;

    margin-left:12px;

}

#Body_Txt2_L1_S{

    width:330px;

    text-align:left;

    padding:0px 0px 8px 8px;

    border-bottom:3px #085EB0 solid;

}

#Body_Txt2_L1_X{

    height:180px;

    text-align:left;

    background-color:#00FFCC;

}

#Body_Txt2_Z1{

    float:left;

    width:330px;

    height:210px;

    margin-left:25px;

}

#Body_Txt2_Z1_S{

    text-align:left;

    padding:0px 0px 6px 8px;

    border-bottom:3px #085EB0 solid;

}

#Body_Txt2_Z1_X{

    height:180px;

    text-align:left;

    background-color:#00FFCC;

}

#Body_Txt2_R1{

    float:left;

    width:252px;

    margin:2px 0px 0px 8px;

}

#Body_Txt2_R1_S{

    text-align:left;

    padding:0px 0px 5px 8px;

}

#Body_Txt2_R1_X{

    width:252px;

    height:180px;

    margin:2px 0px 0px 8px;

    border:1px #085EB0 solid;

}

#Body_Txt3{

    width:980px;

    height:235px;

}

#Body_Txt3_W{

    float:left;

    width:310px;

    margin-left:12px;

}

#Body_Txt3_N_S{

    width:310px;

    height:32px;

}

#Body_Txt3_N_X{

    width:310px;

    height:205px;

    background-color:#D0F0FF;

    border:1px #B1FAF7 solid;

}

#Body_cNav{

    width:980px;

    text-align:center;

    padding:30px 0px 10px 0px;

}

#Body_foot{

    width:980px;

    height:91px;

    background-image:url(newImg/botBG.jpg);

    background-repeat:repeat;

}

-->

</style>

</head>

<body>

<div id="Body_Top"><img src="images/top.gif" border="0"></div>

<div id="Body_TopNav">

    <div id="Body_TopNav_leftDIV">2008年5月13日 星期二</div>

    <div id="Body_TopNav_RightDIV">

        <span><b>站内搜索</b> <input type="text" name="T1"></span>

        <span><img border="0" src="images/sea.gif"></span>

    </div>

</div>

<div id="Body_SPX"></div>

<div id="Body_Txt1">

    <div id="Body_Txt1_L1">

        <div id="Body_Txt1_L1_S"><img src="newImg/LoginIcon.gif" border="0"></div>

        <div id="Body_Txt1_L1_X">

            <div id="Body_Txt1_L1_X_Input">用户名：<input id="txt_username" size="14"></div>

            <div id="Body_Txt1_L1_X_Input">密&nbsp; 码：<input id="txt_pwd" size="14"></div>

            <div id="Body_Txt1_L1_X_Input"><img src="images/log.gif" border="0"><img src="images/re.gif" border="0" style="margin-left:20px;"></div>

        </div>

    </div>

    <div id="Body_Txt1_Z1">

        <div id="Body_Txt1_Z1_S"><img src="newImg/XINWENTIT.gif" border="0"></div>

        <div id="Body_Txt1_Z1_X">

            <div id="Body_Txt1_Z1_X_L"></div>

            <div id="Body_Txt1_Z1_X_R"></div>

        </div>

    </div>

    <div id="Body_Txt1_R1">

        <div id="Body_Txt1_R1_S"><img src="newImg/noticeTIT.gif" border="0"></div>

        <div id="Body_Txt1_R1_Z">

            <!--列表-->

        </div>

        <div id="Body_txt1_R1_X"><img src="images/more.gif" border="0"></div>

    </div>

</div>

<div id="Body_Txt2">

    <div id="Body_Txt2_L1">

        <div id="Body_Txt2_L1_S"><img src="newImg/gongzuodongtai.gif" border="0"></div>

        <div id="Body_Txt2_L1_X">

            

        </div>

    </div>

    

    <div id="Body_Txt2_Z1">

        <div id="Body_Txt2_Z1_S"><img src="newImg/yewuzhuanti.gif" border="0"></div>

        <div id="Body_Txt2_Z1_X">

            

        </div>

    </div>

    

    <div id="Body_Txt2_R1">

        <div id="Body_Txt2_R1_S"><img src="newImg/picNew.gif" border="0"></div>

        <div id="Body_Txt2_R1_X">

            

        </div>

    </div>

</div>

<div id="Body_Txt3">

    <div id="Body_Txt3_W">

        <div id="Body_Txt3_N_S" style="">

            <img src="newImg/zyFile.gif" border="0">

        </div>

        <div id="Body_Txt3_N_X">

            

        </div>

    </div>

    <div id="Body_Txt3_W">

        <div id="Body_Txt3_N_S" style="">

            <img src="newImg/gfbiaozhun.gif" border="0">

        </div>

        <div id="Body_Txt3_N_X">

            

        </div>

    </div>

    <div id="Body_Txt3_W">

        <div id="Body_Txt3_N_S" style="">

            <img src="newImg/zyMeeting.gif" border="0">

        </div>

        <div id="Body_Txt3_N_X">

            

        </div>

    </div>

</div>

<div id="Body_cNav">

    邮箱登录 | 网站地图 | 密码修改 | 系统维护 | 帮 助 | 联系我们

</div>

<div id="Body_foot">

    

</div>

</body>

</html>

27 个解决方案

#1

没有什么大问题  应该就是一般的浏览器兼容问题
像是IE6的float后margin的双倍问题之类的
还有就是没有控制居中的有很多

在IE7里他会自动给你居中
但是像FF的默认是靠左的
像头三个DIV和尾上的FOOT在FF中是不会居中的

因为我也没有IE6~
不好意思   看不到其他的问题

#2

高分求解，刚用div+css做了一个页面，在ie7下正常显示，但是用ie6打开就变形了，哪位高手能帮我看下啊
我测了，没问题哈

#3

这个图就是有问题的啊
本来按设计的是只有三行的，
上面的图片新闻，是前面一行的
重要会员也上面一行的是啊

#4

应该这样：主要是#Body_Txt3_W #Body_txt1_R1_X这种宽度超过最外面容器的宽度了 
用*和_和兼容IE6和IE7吧。把这两个样式改成下面这样就可以了
#Body_Txt3_W{
    float:left;
    width:310px;
    *margin-left:12px;
_margin-left:8px;
}

#Body_Txt2_R1{
    float:left;
    width:252px;
    *margin:2px 0px 0px 8px;
_margin:2px 0px 0px 1px;
}

#5

好像页面head和foot部分的层有点偏移哦！
就是时间旁边这里，登陆框的上方

#6

还有取水动态这个框里的两个div也有点偏移哦

#7

away8_girl  能加你的QQ或msn吗，我的msn：yjm@live.com
你提及的要给改的东西是可以的，先谢谢了

#8

在Firefox/2.0中内容居中也有问题.
div 用的太多.
css太烦琐,没看到一个后代选择器.

#9

主要是第一次写，不会弄啊！而且页面设计的时候图片比较多，所以……
高手们有空的话，可以帮忙修改下，先谢谢了！

#10

现在其他问题已经解决了，就死head和foot部分的层有点偏移，找不到原因
哪位告诉有空能再帮下忙？谢谢

#11

看下CSS样式设置的位置和浮动

#12

找不出来啊！大小都一样的
就是偏移了一个左右的像素，强制给把head和foot缩小了一个像素，勉强是可以了
但是这些对应的右边还是有点留白

#13

这个ID多的。。。看的晕死了  相同样式的使用一个class不就行了吗
float后要clear

#14

第一次弄，很多东西都不了解，很多东西也写的很不规则
哪位高手有时间的话帮小弟优化一下啊，把不必要的东西给去去掉！
谢谢

#15

命名问题已经改过了，
重新发下代码，原来页面那几块大的位移已经解决了，但是header和foot两个位置的一个像素的位移，怎么都解决不了！
哪位高手如果有空的话能帮我优化下，谢谢 


<!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" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<style type="text/css">

<!--

Body {

	margin:0px;

	padding:0px;

	text-align:center;

	background-color:#F2F8FF;

	background-image:url(newImg/bg.jpg);

	background-repeat:repeat-y;

	background-position:center;

}

Body, Div {

	font-size:12px;

	color:#000000;

	font-family:"宋体";

}

#header {

	width:980px;;

	height:101px;

	background-image:url(images/top.gif);

}

#search {

	width:980px;;

	height:28px;

	background-color:#2FAFE9;

}

#search_leftDiv {

 *margin:6px 0px 0px 20px;

	_margin:6px 0px 0px 6px;

	float:left;

	color:#FFFFFF;

	font-size:14px;

	font-weight:bold;

}

#search_RightDiv {

 *margin:3px 20px 0px 0px;

	_margin:3px 20px 0px 0px;

	float:right;

	color:#FFFFFF;

	font-size:14px;

}

#search_RightDiv span {

	vertical-align:top;

}

#horizontalLine {

	width:980px;;

	height:15px;

	background-image:url(newImg/HpxBG.jpg);

	background-repeat:repeat-x;

}

#content1 {

	width:980px;

	height:290px;

}

#login {

	float:left;

	width:255px;

	height:255px;

	margin-top:15px;

   *margin-left:12px;

	_margin-left:8px;

	padding-top:14px;

	background-image:url(newImg/loginBG.jpg);

	background-repeat:no-repeat;

	text-align:center;

}

#loginIco {

	width:210px;

	text-align:left;

	background-color:#D1EAF6;

	padding:8px 0px 8px 8px;

	border-bottom:3px #085EB0 solid;

}

#loginInput {

	width:218px;

	height:170px;

	background-color:#FFFFFF;

	background-image:url(newImg/LoginXBG.jpg);

	background-repeat:repeat-x;

}

.userLogin {

	width:200px;

	margin-top:25px;

	font-weight:bold;

	color:#085EB0;

}

#qsNews {

	float:left;

	width:435px;

	height:279px;

	margin:2px 0px 0px 5px;

}

#qsNewsIco {

	text-align:left;

	padding-left:8px;

}

#qsNewsShow {

	width:435px;

	height:240px;

	margin-top:3px;

	background-color:#FFFFFF;

	background-image:url(newImg/XINWENBG.jpg);

	background-repeat:no-repeat;

}

#qsNewsLeft {

	width:276px;

	height:194px;

	float:left;

 *margin:14px 0px 0px 11px;

	_margin:14px 0px 0px 6px;

	background-color:#00FFFF;

}

#qsNewsRight {

	width:128px;

	height:180px;

	float:left;

 *margin:14px 0px 0px 6px;

	_margin:14px 0px 0px 0px;

	background-color:#CCFF00;

}

#notice {

	float:left;

	width:252px;

	margin:2px 0px 0px 8px;

}

#noticeIco {

	text-align:left;

	padding:0px 0px 5px 8px;

	border-bottom:4px #085EB0 solid;

}

#noticeLi {

	width:252px;

	height:200px;

	background-color:#00CCCC;

}

#noticeMore {

	text-align:right;

	padding-top:10px;

}

#content2 {

	width:980px;

	height:235px;

}

#workDynamic {

	float:left;

	width:330px;

	height:210px;

 *margin-left:12px;

	_margin-left:8px;

}

#workDynamicIco {

	width:330px;

	text-align:left;

	padding:0px 0px 8px 8px;

	border-bottom:3px #085EB0 solid;

}

#workDynamicLi {

	height:180px;

	text-align:left;

	background-color:#00FFCC;

}

#operation {

	float:left;

	width:330px;

	height:210px;

 *margin-left:25px;

	_margin-left:21px;

}

#operationIco {

	text-align:left;

	padding:0px 0px 6px 8px;

	border-bottom:3px #085EB0 solid;

}

#operationLi {

	height:180px;

	text-align:left;

	background-color:#00FFCC;

}

#picNews {

	float:left;

	width:252px;

 *margin:2px 0px 0px 8px;

	_margin:2px 0px 0px 1px;

}

#picNewsIco {

	text-align:left;

	padding:0px 0px 5px 8px;

}

#picNewsLi {

	width:252px;

	height:180px;

	margin:2px 0px 0px 8px;

	border:1px #085EB0 solid;

}

#content3 {

	width:980px;

	height:235px;

}

.import {

	float:left;

	width:310px;

 *margin-left:12px;

	_margin-left:8px;

}

.importIco {

	width:310px;

	height:32px;

}

.importLi {

	width:310px;

	height:205px;

	background-color:#D0F0FF;

	border:1px #B1FAF7 solid;

}

#emailNav {

	width:980px;

	text-align:center;

	padding:30px 0px 10px 0px;

}

#foot {

	width:980px;;

	height:91px;

	background-image:url(newImg/botBG.jpg);

	background-repeat:repeat;

}

-->

</style>

</head>

<body>

<div id="header"></div>

<div id="search">

  <ul id="search_leftDiv">2008年5月13日 星期二</ul>

  <ul id="search_RightDiv"> <span><b>站内搜索</b>

    <input type="text" name="T1"> <span><img border="0" src="images/sea.gif"></span> </ul>

</div>

<div id="horizontalLine"></div>

<div id="content1">

  <div id="login">

    <div id="loginIco"><img src="newImg/LoginIcon.gif" border="0"></div>

    <div id="loginInput">

      <div class="userLogin">用户名：

        <input id="txtUserName" size="14">

      </div>

      <div  class="userLogin">密&nbsp; 码：

        <input id="txtPwd" size="14">

      </div>

      <div  class="userLogin"><img src="images/log.gif" border="0"><img src="images/re.gif" border="0" style="margin-left:20px;"></div>

    </div>

  </div>

  <div id="qsNews">

    <div id="qsNewsIco"><img src="newImg/XINWENTIT.gif" border="0"></div>

    <div id="qsNewsShow">

      <div id="qsNewsLeft"></div>

      <div id="qsNewsRight"></div>

    </div>

  </div>

  <div id="notice">

    <div id="noticeIco"><img src="newImg/noticeTIT.gif" border="0"></div>

    <div id="noticeLi">

      <!--列表-->

    </div>

    <div id="noticeMore"><img src="images/more.gif" border="0"></div>

  </div>

</div>

<div id="content2">

  <div id="workDynamic">

    <div id="workDynamicIco"><img src="newImg/gongzuodongtai.gif" border="0"></div>

    <div id="workDynamicLi"> </div>

  </div>

  <div id="operation">

    <div id="operationIco"><img src="newImg/yewuzhuanti.gif" border="0"></div>

    <div id="operationLi"> </div>

  </div>

  <div id="picNews">

    <div id="picNewsIco"><img src="newImg/picNew.gif" border="0"></div>

    <div id="picNewsLi"> </div>

  </div>

</div>

<div id="content3">

  <div class="import">

    <div class="importIco" style=""> <img src="newImg/zyFile.gif" border="0"> </div>

    <div class="importLi"> </div>

  </div>

  <div class="import">

    <div class="importIco" style=""> <img src="newImg/gfbiaozhun.gif" border="0"> </div>

    <div class="importLi"> </div>

  </div>

  <div class="import">

    <div class="importIco" style=""> <img src="newImg/zyMeeting.gif" border="0"> </div>

    <div class="importLi"> </div>

  </div>

</div>

<div id="emailNav"> 邮箱登录 | 网站地图 | 密码修改 | 系统维护 | 帮 助 | 联系我们 </div>

<div id="foot"> </div>

</body>

</html>

#16

目测：那个图的DIV被挤下来是因为margin被双倍了，宽度不够，所以被挤下来
至于头上的一个像素~
怎么都调不过来，也是因为margin双倍

所以，一个像素的变化就会变成2个

以上都是没有经过测试

顺便问下，知道这个双倍问题怎么解决不？

#17

不知道啊！请指教

#18

中间div被挤下来的问题已经解决，现在主要是head和foot的一个像素的位移
这个不是浏览器问题，在ie7里也是偏的
忘请高手帮忙解决，谢谢

#19

中间div被挤下来的问题已经解决，现在主要是head和foot的一个像素的位移
这个不是浏览器问题，在ie7里也是偏的
忘请高手帮忙解决，谢谢

#20

加这个display:inline;解决双倍问题

#21

经过查看发现~
你的背景图片的白色区域大小为981px
而你的DIV都是980px
不知道你是不是指这个一像素

#22

高分求解，刚用div+css做了一个页面，在ie7下正常显示，但是用ie6打开就变形了，哪位高手能帮我看下啊
我的ie7里是这样的啊

#23

是的！怎么去掉呢
我的背景图片只有980，而且div大小也是980，
最下面的foot部分也是有一像素的偏移

#24

留着吧  挺好看的
我还以为是故意的留白~

去掉的话就是把BG.JPG做过一个啊~
中间再少一个像素就可以了啊

还有就是你的CSS写的不是很好
有FF不？到里面看下啊

#25

看过了！一片狼藉啊
实在不知道怎么去改哦！水平太差了
高手有空帮我优化下啊！

#26

多看点兼容方面的材料

不动hacks可以
但是不能不兼容~
你说呢？

#27

好东西

#1

没有什么大问题  应该就是一般的浏览器兼容问题
像是IE6的float后margin的双倍问题之类的
还有就是没有控制居中的有很多

在IE7里他会自动给你居中
但是像FF的默认是靠左的
像头三个DIV和尾上的FOOT在FF中是不会居中的

因为我也没有IE6~
不好意思   看不到其他的问题

#2

高分求解，刚用div+css做了一个页面，在ie7下正常显示，但是用ie6打开就变形了，哪位高手能帮我看下啊
我测了，没问题哈

#3

这个图就是有问题的啊
本来按设计的是只有三行的，
上面的图片新闻，是前面一行的
重要会员也上面一行的是啊

#4

应该这样：主要是#Body_Txt3_W #Body_txt1_R1_X这种宽度超过最外面容器的宽度了 
用*和_和兼容IE6和IE7吧。把这两个样式改成下面这样就可以了
#Body_Txt3_W{
    float:left;
    width:310px;
    *margin-left:12px;
_margin-left:8px;
}

#Body_Txt2_R1{
    float:left;
    width:252px;
    *margin:2px 0px 0px 8px;
_margin:2px 0px 0px 1px;
}

#5

好像页面head和foot部分的层有点偏移哦！
就是时间旁边这里，登陆框的上方

#6

还有取水动态这个框里的两个div也有点偏移哦

#7

away8_girl  能加你的QQ或msn吗，我的msn：yjm@live.com
你提及的要给改的东西是可以的，先谢谢了

#8

在Firefox/2.0中内容居中也有问题.
div 用的太多.
css太烦琐,没看到一个后代选择器.

#9

主要是第一次写，不会弄啊！而且页面设计的时候图片比较多，所以……
高手们有空的话，可以帮忙修改下，先谢谢了！

#10

现在其他问题已经解决了，就死head和foot部分的层有点偏移，找不到原因
哪位告诉有空能再帮下忙？谢谢

#11

看下CSS样式设置的位置和浮动

#12

找不出来啊！大小都一样的
就是偏移了一个左右的像素，强制给把head和foot缩小了一个像素，勉强是可以了
但是这些对应的右边还是有点留白

#13

这个ID多的。。。看的晕死了  相同样式的使用一个class不就行了吗
float后要clear

#14

第一次弄，很多东西都不了解，很多东西也写的很不规则
哪位高手有时间的话帮小弟优化一下啊，把不必要的东西给去去掉！
谢谢

#15

命名问题已经改过了，
重新发下代码，原来页面那几块大的位移已经解决了，但是header和foot两个位置的一个像素的位移，怎么都解决不了！
哪位高手如果有空的话能帮我优化下，谢谢 


<!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" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<style type="text/css">

<!--

Body {

	margin:0px;

	padding:0px;

	text-align:center;

	background-color:#F2F8FF;

	background-image:url(newImg/bg.jpg);

	background-repeat:repeat-y;

	background-position:center;

}

Body, Div {

	font-size:12px;

	color:#000000;

	font-family:"宋体";

}

#header {

	width:980px;;

	height:101px;

	background-image:url(images/top.gif);

}

#search {

	width:980px;;

	height:28px;

	background-color:#2FAFE9;

}

#search_leftDiv {

 *margin:6px 0px 0px 20px;

	_margin:6px 0px 0px 6px;

	float:left;

	color:#FFFFFF;

	font-size:14px;

	font-weight:bold;

}

#search_RightDiv {

 *margin:3px 20px 0px 0px;

	_margin:3px 20px 0px 0px;

	float:right;

	color:#FFFFFF;

	font-size:14px;

}

#search_RightDiv span {

	vertical-align:top;

}

#horizontalLine {

	width:980px;;

	height:15px;

	background-image:url(newImg/HpxBG.jpg);

	background-repeat:repeat-x;

}

#content1 {

	width:980px;

	height:290px;

}

#login {

	float:left;

	width:255px;

	height:255px;

	margin-top:15px;

   *margin-left:12px;

	_margin-left:8px;

	padding-top:14px;

	background-image:url(newImg/loginBG.jpg);

	background-repeat:no-repeat;

	text-align:center;

}

#loginIco {

	width:210px;

	text-align:left;

	background-color:#D1EAF6;

	padding:8px 0px 8px 8px;

	border-bottom:3px #085EB0 solid;

}

#loginInput {

	width:218px;

	height:170px;

	background-color:#FFFFFF;

	background-image:url(newImg/LoginXBG.jpg);

	background-repeat:repeat-x;

}

.userLogin {

	width:200px;

	margin-top:25px;

	font-weight:bold;

	color:#085EB0;

}

#qsNews {

	float:left;

	width:435px;

	height:279px;

	margin:2px 0px 0px 5px;

}

#qsNewsIco {

	text-align:left;

	padding-left:8px;

}

#qsNewsShow {

	width:435px;

	height:240px;

	margin-top:3px;

	background-color:#FFFFFF;

	background-image:url(newImg/XINWENBG.jpg);

	background-repeat:no-repeat;

}

#qsNewsLeft {

	width:276px;

	height:194px;

	float:left;

 *margin:14px 0px 0px 11px;

	_margin:14px 0px 0px 6px;

	background-color:#00FFFF;

}

#qsNewsRight {

	width:128px;

	height:180px;

	float:left;

 *margin:14px 0px 0px 6px;

	_margin:14px 0px 0px 0px;

	background-color:#CCFF00;

}

#notice {

	float:left;

	width:252px;

	margin:2px 0px 0px 8px;

}

#noticeIco {

	text-align:left;

	padding:0px 0px 5px 8px;

	border-bottom:4px #085EB0 solid;

}

#noticeLi {

	width:252px;

	height:200px;

	background-color:#00CCCC;

}

#noticeMore {

	text-align:right;

	padding-top:10px;

}

#content2 {

	width:980px;

	height:235px;

}

#workDynamic {

	float:left;

	width:330px;

	height:210px;

 *margin-left:12px;

	_margin-left:8px;

}

#workDynamicIco {

	width:330px;

	text-align:left;

	padding:0px 0px 8px 8px;

	border-bottom:3px #085EB0 solid;

}

#workDynamicLi {

	height:180px;

	text-align:left;

	background-color:#00FFCC;

}

#operation {

	float:left;

	width:330px;

	height:210px;

 *margin-left:25px;

	_margin-left:21px;

}

#operationIco {

	text-align:left;

	padding:0px 0px 6px 8px;

	border-bottom:3px #085EB0 solid;

}

#operationLi {

	height:180px;

	text-align:left;

	background-color:#00FFCC;

}

#picNews {

	float:left;

	width:252px;

 *margin:2px 0px 0px 8px;

	_margin:2px 0px 0px 1px;

}

#picNewsIco {

	text-align:left;

	padding:0px 0px 5px 8px;

}

#picNewsLi {

	width:252px;

	height:180px;

	margin:2px 0px 0px 8px;

	border:1px #085EB0 solid;

}

#content3 {

	width:980px;

	height:235px;

}

.import {

	float:left;

	width:310px;

 *margin-left:12px;

	_margin-left:8px;

}

.importIco {

	width:310px;

	height:32px;

}

.importLi {

	width:310px;

	height:205px;

	background-color:#D0F0FF;

	border:1px #B1FAF7 solid;

}

#emailNav {

	width:980px;

	text-align:center;

	padding:30px 0px 10px 0px;

}

#foot {

	width:980px;;

	height:91px;

	background-image:url(newImg/botBG.jpg);

	background-repeat:repeat;

}

-->

</style>

</head>

<body>

<div id="header"></div>

<div id="search">

  <ul id="search_leftDiv">2008年5月13日 星期二</ul>

  <ul id="search_RightDiv"> <span><b>站内搜索</b>

    <input type="text" name="T1"> <span><img border="0" src="images/sea.gif"></span> </ul>

</div>

<div id="horizontalLine"></div>

<div id="content1">

  <div id="login">

    <div id="loginIco"><img src="newImg/LoginIcon.gif" border="0"></div>

    <div id="loginInput">

      <div class="userLogin">用户名：

        <input id="txtUserName" size="14">

      </div>

      <div  class="userLogin">密&nbsp; 码：

        <input id="txtPwd" size="14">

      </div>

      <div  class="userLogin"><img src="images/log.gif" border="0"><img src="images/re.gif" border="0" style="margin-left:20px;"></div>

    </div>

  </div>

  <div id="qsNews">

    <div id="qsNewsIco"><img src="newImg/XINWENTIT.gif" border="0"></div>

    <div id="qsNewsShow">

      <div id="qsNewsLeft"></div>

      <div id="qsNewsRight"></div>

    </div>

  </div>

  <div id="notice">

    <div id="noticeIco"><img src="newImg/noticeTIT.gif" border="0"></div>

    <div id="noticeLi">

      <!--列表-->

    </div>

    <div id="noticeMore"><img src="images/more.gif" border="0"></div>

  </div>

</div>

<div id="content2">

  <div id="workDynamic">

    <div id="workDynamicIco"><img src="newImg/gongzuodongtai.gif" border="0"></div>

    <div id="workDynamicLi"> </div>

  </div>

  <div id="operation">

    <div id="operationIco"><img src="newImg/yewuzhuanti.gif" border="0"></div>

    <div id="operationLi"> </div>

  </div>

  <div id="picNews">

    <div id="picNewsIco"><img src="newImg/picNew.gif" border="0"></div>

    <div id="picNewsLi"> </div>

  </div>

</div>

<div id="content3">

  <div class="import">

    <div class="importIco" style=""> <img src="newImg/zyFile.gif" border="0"> </div>

    <div class="importLi"> </div>

  </div>

  <div class="import">

    <div class="importIco" style=""> <img src="newImg/gfbiaozhun.gif" border="0"> </div>

    <div class="importLi"> </div>

  </div>

  <div class="import">

    <div class="importIco" style=""> <img src="newImg/zyMeeting.gif" border="0"> </div>

    <div class="importLi"> </div>

  </div>

</div>

<div id="emailNav"> 邮箱登录 | 网站地图 | 密码修改 | 系统维护 | 帮 助 | 联系我们 </div>

<div id="foot"> </div>

</body>

</html>

#16

目测：那个图的DIV被挤下来是因为margin被双倍了，宽度不够，所以被挤下来
至于头上的一个像素~
怎么都调不过来，也是因为margin双倍

所以，一个像素的变化就会变成2个

以上都是没有经过测试

顺便问下，知道这个双倍问题怎么解决不？

#17

不知道啊！请指教

#18

中间div被挤下来的问题已经解决，现在主要是head和foot的一个像素的位移
这个不是浏览器问题，在ie7里也是偏的
忘请高手帮忙解决，谢谢

#19

中间div被挤下来的问题已经解决，现在主要是head和foot的一个像素的位移
这个不是浏览器问题，在ie7里也是偏的
忘请高手帮忙解决，谢谢

#20

加这个display:inline;解决双倍问题

#21

经过查看发现~
你的背景图片的白色区域大小为981px
而你的DIV都是980px
不知道你是不是指这个一像素

#22

高分求解，刚用div+css做了一个页面，在ie7下正常显示，但是用ie6打开就变形了，哪位高手能帮我看下啊
我的ie7里是这样的啊

#23

是的！怎么去掉呢
我的背景图片只有980，而且div大小也是980，
最下面的foot部分也是有一像素的偏移

#24

留着吧  挺好看的
我还以为是故意的留白~

去掉的话就是把BG.JPG做过一个啊~
中间再少一个像素就可以了啊

还有就是你的CSS写的不是很好
有FF不？到里面看下啊

#25

看过了！一片狼藉啊
实在不知道怎么去改哦！水平太差了
高手有空帮我优化下啊！

#26

多看点兼容方面的材料

不动hacks可以
但是不能不兼容~
你说呢？

#27

好东西
标签：

相关文章