求教请高手帮忙_html/css_WEB-ITnose
- WBOY原创
- 2016-06-24 12:08:131038浏览
排版好了一个HTML页面，用的是DIV+CSS。。
页面在FF、IE7、360、Google浏览器下排版是正常的，可是在IE8、IE6下显示，就凌乱了！~~
这是什么原因呢？~~
回复讨论(解决方案)
兼容性问题，再仔细调调
调试了一个上午，就是无解才寻找高手帮忙的
没有代码，神仙也无能为力。
<!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" /><link type="text/css" rel="stylesheet" href="./style/layout.css" /><link type="text/css" rel="stylesheet" href="./style/global.css" /><title>关于我们_书画</title></head><body><div class="header"> <div class="left"> <div class="logo"><img src="images/logo.gif" / alt="求教请高手帮忙_html/css_WEB-ITnose" ></div> </div> <div class="center"> <div class="company">某书画社</div> </div> <div class="right"></div></div><div class="navigation"> <div class="ntop"> <div class="fdiv"><a href="index.html" target="_self">网站首页</a></div> <div class="fdiv"><a href="about.html" target="_self">关于我们</a></div> <div class="fdiv"><a href="produces.html" target="_self">产品展示</a></div> <div class="fdiv"><a href="###" target="_self">新闻动态</a></div> <div class="fdiv"><a href="###" target="_self">论文欣赏</a></div> <div class="fdiv"><a href="###" target="_self">访客留言</a></div> <div class="fdiv"><a href="###" target="_self">销售网络</a></div> <div class="fdiv"><a href="###" target="_self">联系我们</a></div> </div> <div> <div class="nleft"></div><div class="ncenter"></div><div class="nright"></div> </div></div><div class="info"> <div class="info_left"> <div class="a_top1"> <div class="at1_left"> <div class="title_div2"><span class="title_index">书画类别</span></div> </div> <div class="at1_right"> <div class="null2"></div> <div class="aar_bg"></div> </div> </div> <div class="a_top2"> <ul> <li><a href="###">产品类别一</a></li> <li><a href="###">产品类别二</a></li> <li><a href="###">产品类别三</a></li> <li><a href="###">产品类别四</a></li> <li><a href="###">产品类别五</a></li> </ul> </div> <div class="a_top3"> <div class="at3_left"> <div class="title_div2"><span class="title_index">联系我们</span></div> </div> <div class="at3_right"> <div class="null3"></div> <div class="aa3r_bg"></div> </div> </div> <div class="a_top4"> <span class="ia_font"> 公司名称:XX工艺美术中心<br /> 公司地址:XX市XX路XX号<br /> 联 系 人:李先生<br /> 联系电话:XXXX-XXXXXXXX<br /> 电子邮件:XX@XX.com<br /> Q Q:000000000<br /> 邮 编:000000 </span> </div> </div> <div class="info_center"></div> <div class="info_right"> <div class="iir_top"> <div class="iirt_left"> <div class="title_div1"><span class="title_index">关于我们</span></div> </div> <div class="iirt_right"> <div class="null4"></div> <div class="iir_bg"></div> </div> </div> <div class="iir_info"> <SPAN class="article"> XX工艺美术历史悠久，源远流长，其丰富多彩的种类、千姿百态的形式素以工艺精美、秀丽、精湛的艺术特色著称于世，在全国工艺美术行业具有十分重要的地位。 XX市工艺美术行业协会是由XX地区工艺美术行业（包括刺绣、缂丝、檀香扇、剧装戏具、红木家具、民族乐器、湖笔、玉雕、漆器、石雕、金银饰品、桃花坞木刻年画等）的企业为主体自愿组成，是一个为实现全行业企业共同意愿的非营利性社会团体，目前有四十七个会员单位。 协会的宗旨是：遵守国家宪法、法律、法规和国家政策，遵守社会道德风尚，作为社会中介和市场中介热忱为政府和企业服务，联合、开拓、创新，促进苏州地区工艺美术行业和事业的繁荣和发展。 协会的主要工作是： （一） 开展对全行业基本资料和动态情况的调查、研究和发布，为政府制定行业发展规划、经济技术政策和有关立法提供依据和建议，为企业经营决策提供服务。 （二） 建立行自律性机制，规范行业自我管理行为；制定行业道德准则及行规行约并督促执行；维护行业内公平竞争，维护企业的合法权益；协调企业间的关系，组织经验交流以及生产、技术的经营合作，推动横向联合。 （三） 参与制订、修改产品标准、技术标准、经济标准、管理标准和服务标准等行业各类标准，并组织贯彻实施；推荐行业内高新技术产品名牌产品和企业，组织产品和技术成果的鉴定，并加以推广应用。 （四） 组织和参加海内外本行业的展览会、展销会、报告会、研讨会并出版专业刊物，组织技术培训，兴办行业实体，开展咨询和信息服务，以疏通行业的产、供、销渠道，推进行业的开发能力、技术进步、人员素质和管理水平的不断提高。 （五） 与国外同行及相关组织建立联络，开展国际技艺交流、经贸合作与友好往来。 （六） 协助市工艺美术行政主管部门贯彻实施国家和省传统工艺美术保护条例。 （七） 承办政府及有关部门和全国工艺美术行业协会交办或委托的工作及事项；开展行业协会宗旨所允许的其它活动。</SPAN> </div> </div></div><div class="buttom1"></div><div class="buttom2"> 版权所有：XXX工艺美术中心 公司地址：XX市XX路XX号 邮编：XXXXXX<br /> 联系电话：XXXX-XXXXXXXX 联系人:XXX 电子邮箱：XXX@XX.COM</div></body></html>
不好意思。。忘记了。。
/*头部的CSS布局*/.header{ margin:0px auto; height:182px; width:1000px;}.header .left { height:182px; width:268px; float:left; background:url(../images/in01.jpg) no-repeat;}.header .left .logo /*Logo*/{ margin:60px 0px 0px;}.header .center{ height:182px; width:475px; background:url(../images/in02.jpg) no-repeat; float:left; text-align:center;}.header .center .company /*公司名称*/{ margin:78px auto 0px; font-weight:bold; font-size:28px;}.header .right{ height:182px; width:257px; background:url(../images/in03.jpg) no-repeat; float:left;}/*导航栏的CSS布局*/.navigation{ width:1000px; height:46px; margin:0px auto;}.navigation .ntop{ background:url(../images/in07.jpg) repeat; height:30px;}.navigation .ntop .fdiv{ float:left; width:125px; height:30px; line-height:30px; text-align:center; }.navigation .ntop .fdiv a{ font-size:14px; font-weight:bold; color:#FFFFFF;}.navigation .nleft /*导航栏底部排版*/{ background:url(../images/in05.jpg) no-repeat; width:250px; height:16px; float:left;}.navigation .ncenter{ background:url(../images/in06.jpg) no-repeat; width:417px; height:16px; float:left;}.navigation .nright{ background:url(../images/in08.jpg) no-repeat; width:333px; height:16px; float:left;}/*内容页排版*//*首页内容*/.index_info{ width:1000px; height:390px; margin:0px auto; background:url(../images/in17.jpg) repeat-x;}.index_info .ileft /*首页的左边*/{ width:391px; float:left;}.index_info .ileft .icontents{ margin-left:30px; width:361px; height:195px;}.index_info .ileft .icontents .top1{ width:361px; height:45px;}.index_info .ileft .icontents .top1 .leftIco1{ float:left; width:122px; height:45px; background:url(../images/in18.jpg) no-repeat; }.index_info .ileft .icontents .top1 .rightIco1{ float:left; width:239px; height:45px; background:url(../images/in19.jpg) no-repeat; }.index_info .ileft .icontents .top2{ width:320px; margin-left:18px;}.index_info .ileft .icontents .top3{ width:361px; height:45px;}.index_info .ileft .icontents .top3 .leftIco2{ float:left; width:113px; height:56px; background:url(../images/in27.jpg) no-repeat; }.index_info .ileft .icontents .top3 .rightIco2{ float:left; width:248px; height:56px;}.index_info .ileft .icontents .top3 .rightIco2 .t3r_bg{ background:url(../images/in28.jpg) no-repeat; height:20px;}.index_info .ileft .icontents .top4{ width:361px; height:124px; background:url(../images/in29.jpg); margin-top:13px;}.index_info .ileft .icontents .top4 .info_word{ width:180px; height:124px; margin-left:85px; line-height:16px;}.index_info .ileft .icontents .top4 .info_word .span_font{ color:#365b2d; font-size:13px}.index_info .icenter /*首页的分割线*/{ float:left; background:url(../images/in24.jpg) repeat; width:8px; height:390px;}.index_info .iright /*首页右侧的内容*/{ float:left; width:600px; height:390px;}.index_info .iright .itop1{ height:57px;}.index_info .iright .itop1 .itop1_left{ background:url(../images/in30.jpg) no-repeat; width:134px; height:57px; float:left;}.index_info .iright .itop1 .itop1_right{ background:url(../images/in31.jpg) no-repeat; width:466px; height:57px; float:left;}.index_info .iright .itop2{ width:510px; height:143px; margin:5px 35px; overflow:hidden;}.index_info .iright .itop2 ul li{ float:left; margin:0px 3px; text-align:center;}.index_info .iright .itop2 ul li .li_text{ margin:5px auto 0px;}.index_info .iright .itop3_left{ width:298px; margin-top:10px; float:left;}.index_info .iright .itop3_left .il_top{ width:298px; height:52px;}.index_info .iright .itop3_left .il_top .il_top_left{ height:52px; width:134px; background:url(../images/in35.jpg) no-repeat; float:left;}.index_info .iright .itop3_left .il_top .il_top_right{ height:52px; width:164px; float:left; background:url(../images/in36.jpg) no-repeat;}.index_info .iright .itop3_left .il_img{ margin-left:25px; width:137px; height:105px; float:left;}.index_info .iright .itop3_left .il_text{ width:136px; margin:20px 0px; float:left;}.index_info .iright .itop3_right{ width:300px; margin-top:5px; float:left;}.index_info .iright .itop3_right .ir_top{ width:300px; height:52px;}.index_info .iright .itop3_right .ir_top .ir_top_left{ width:129px; height:52px; background:url(../images/in37.jpg) no-repeat; float:left;}.index_info .iright .itop3_right .ir_top .ir_top_right{ width:171px; height:52px; background:url(../images/in38.jpg) no-repeat; float:left;}.index_info .iright .itop3_right .ir_info{ margin-left:85px;}.index_info .iright .itop3_right .ir_info ul li{ background:url(../images/200871613443395.gif) no-repeat; width:181px; height:25px; padding-left:40px;}.index_info .iright .itop3_right .ir_info ul li a{ color:#186000;}/*内容页排版*/.info{ width:1000px; height:450px; margin:0 auto; background:url(../images/bg.jpg);}.info .info_left{ width:280px; height:450px; float:left;}.info .info_left .a_top1{ margin-left:30px; width:253px; height:44px;}.info .info_left .a_top1 .at1_left{ width:115px; height:44px; background:url(../images/zy01.jpg) no-repeat; float:left;}.info .info_left .a_top1 .at1_right{ width:138px; height:44px; float:left;}.info .info_left .a_top1 .at1_right .aar_bg{ background:url(../images/zy02.jpg) no-repeat; height:15px; width:138px;}.info .info_left .a_top2{ margin-left:80px;}.info .info_left .a_top2 ul li{ background:url(../images/200871613443395.gif) no-repeat; width:181px; height:25px; padding-left:40px;}.info .info_left .a_top2 ul li a{ color:#186000;}.info .info_left .a_top3{ margin-left:30px; width:253px; height:55px;}.info .info_left .a_top3 .at3_left{ width:106px; height:55px; background:url(../images/zy11.jpg) no-repeat; float:left;}.info .info_left .a_top3 .at3_right{ width:147px; height:55px; float:left;}.info .info_left .a_top3 .at3_right .aa3r_bg{ background:url(../images/zy12.jpg) no-repeat; height:28px; width:147px;}.info .info_left .a_top4{ width:180px; height:124px; margin-left:75px; margin-top:20px; line-height:18px;}.info .info_left .a_top4 .ia_font{ color:#365b2d; font-size:13px}.info .info_center{ float:left; background:url(../images/in24.jpg) repeat; width:8px; height:450px;}.info .info_right{ float:left; width:700px; height:450px;}.info .info_right .iir_top{ width:709px; height:42px;}.info .info_right .iir_top .iirt_left{ width:131px; height:42px; float:left; background:url(../images/zy09.jpg) no-repeat;}.info .info_right .iir_top .iirt_right{ width:578; height:42px; float:left;}.info .info_right .iir_top .iirt_right .iir_bg{ background:url(../images/zy10.jpg) no-repeat; height:21px; width:578px;}.info .info_right .iir_info{ margin-left:30px; margin-top:15px;}.info .info_right .iir_info .article{ color:#264126; line-height:200%; font-family:"宋体";}.info .info_right .iir_produces /*产品展示*/{ margin-top:20px; width:600px; height:360px;}.info .info_right .iir_produces ul li{ float:left; margin-left:80px;}.info .info_right .iir_produces ul li .li_info{ text-align:center; line-height:30px;}.info .info_right .iir_produces ul li .li_info a{ color:#186000;}/*分页排版*/.info .info_right .pageNav{ width:600px; height:20px; margin-left:50px;}.info .info_right .pageNav .gotoBtn{ float:right; width:150px; height:20px;}.info .info_right .pageNav .gotoBtn .textBtn{ width:25px; border:1px solid #CCCCCC;}.info .info_right .pageNav .gotoBtn .btn{ border:1px solid #CCCCCC; background-color:#FFF}/*尾部排版*/.buttom1{ width:1000px; height:19px; margin:0px auto; background:url(../images/zy13.jpg) no-repeat;}.buttom2{ color:#5c443d; text-align:center; line-height:15px; width:1000px; height:30px; margin:0px auto; background:url(../images/in25.jpg);}/*标题栏边框样式*/.title_div1{ margin:15px 0px 0px 65px;}.title_div2{ margin:20px 0px 10px 50px;}.title_div3{ margin:18px 0px 10px 55px;}.title_div4{ margin:20px 0px 0px 77px;}.title_div5{ margin:18px 0px 10px 70px;}/*设定空的DIV排版*/.null1{ height:36px;}.null2{ height:29px;}.null3{ height:27px;}.null4{height:21px;} 这个是上面代码的CSS
看了一下是你的
.iir_info 的内容太多，使其高度超出了父元素的高度
重新设计一下整体布局大小
或者
.iir_info {
height: 350px;
overflow: auto;
}
像这样带有滚动条
嗯。。谢谢~~我试试。。
不过还有一个问题我自己解决了。。。。
那个CSS的编码格式要和HTML对应。
我设置了@ charset:"gb2312";后页面OK了。。。就剩IE6的BUG了。。
还是很感谢你
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn