转载出处：http://www.jianshu.com/p/f09f40591d97
一、出现极速模式问题不兼容如下
实际兼容模式是这样显示：
html代码部分
<div id="search1" class="page box"> <div class="searchform fl"> <form action="/search.jspx" target="_blank"> <!-- mark20170829：解决了单独页面查栏目的问题 --> <input name="channelId" value="91" type="hidden"> <input name="q" value="" id="txtKey1" οnfοcus="if(this.value=='请输入关键词')this.value=''" οnblur="if(this.value=='')this.value='请输入关键词'" maxlength="24" autocomplete="on" placeholder="请输入关键词" type="text"> <input class="inp-sub" id="btnSearch" value="" type="submit"> </form> </div> </div> 不兼容css部分代码 .fl input { width:340px; height:35px; border-bottom:#ddd 1px solid; position:relative;border-radius:2px 0px 0px 2px; margin: 0px;padding: 0px;border: 0px; padding-left: 15px; } .fl .inp-sub { width: 55px; height:35px;background:url(../images/icon-search.png)no-repeat center center; background-color: #FFF; border-bottom:#ddd 1px solid; position:relative;color: white; border-radius:0px 2px 2px 0px; margin-left: -3px;padding: 0px; border: 0px; }修复css后部分代码：原因是父级div未设置属性导致元素塌陷，父级div下面的标签，第一个需要左浮动
.infolist .page{ overflow: hidden;/*将元素的overflow设置为一个非visible的值防止塌陷*/ } .fl input { width:340px; height:35px; border-bottom:#ddd 1px solid; position:relative;border-radius:2px 0px 0px 2px; margin: 0px;padding: 0px;border: 0px; padding-left: 15px; float:left;/*第一个input加入左对齐*/ } .fl .inp-sub { width: 55px; height:35px;background:url(../images/icon-search.png)no-repeat center center; background-color: #FFF; border-bottom:#ddd 1px solid; position:relative;color: white; border-radius:0px 2px 2px 0px; margin-left: -3px;padding: 0px; border: 0px; }
另附其他元素塌陷解决办法链接
http://blog.csdn.net/kirinlau/article/details/73505903
