Home >Web Front-end >HTML Tutorial >Asking for advice and help from experts_html/css_WEB-ITnose
Asking for advice and help from experts_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:08:131060browse
An HTML page has been formatted, using DIV CSS. .
The page layout is normal under FF, IE7, 360, and Google Chrome, but when displayed under IE8 and IE6, it is messy! ~~
What is the reason for this? ~~
Reply to the discussion (solution)
Compatibility issue, please adjust it carefully
After debugging for a whole morning, It’s when you have no solution that you seek help from experts
Without code, even gods can do nothing.
<!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" /></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>
Sorry. . Forgot. .
/*头部的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;} This is the CSS of the above code
I looked at it and it turns out that your
.iir_info has too much content, making its height exceed the parent element. The height of
redesign the overall layout size
or
.iir_info {
height: 350px;
overflow: auto;
}
like this With scrollbars
Hmm. . Thank you~~I'll try it. .
But there is another problem that I solved myself. . . .
The encoding format of the CSS must correspond to HTML.
I set @charset:"gb2312"; and the page became OK. . . The only BUG left is IE6. .
Thank you very much
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：In the above program, when you click to delete a row in the table, you cannot delete it at will. No matter which one you click, it will be deleted from top to bottom. Please help him to click delete after each row to delete the row~Thank you_html/css_WEB -ITnoseNext article：In the above program, when you click to delete a row in the table, you cannot delete it at will. No matter which one you click, it will be deleted from top to bottom. Please help him to click delete after each row to delete the row~Thank you_html/css_WEB -ITnose