解决Chrome和IE兼容性问题

1.加入<div style=" clear:both; "></div>,解决撑开父元素。

2.利用CSS hack

div.List_Box2 div.item p.thumb{
float:left;
width:100px;
padding:0 13px 0 13px;    /*Chrome识别*/
*padding:20px 13px 0 13px;  /*IE识别*/
}

 

参考:

关于div用了float浮动之后,如何撑开父元素,让父元素div自动适应高度的问题

方法一:这个方法的关键在于用了clear:both来清除了浮动元素,把父元素all1撑开。
html:
<div id="all1">
<div id="left1">1</div>
<div id="left2">1</div>
<div style=" clear:both; "></div>
</div>

css:
#left1{ float:left;width:200px;}
#left2{ float:left;width:200px;}
#all1{}

方法二:此方法的重点在于,子元素有float之后,父元素需要设置一个overflow:hidden;,这样就可以自动撑开父元素aa。
*overflow:hidden之后,超出父元素位置的子元素就看不到了
html:
<div class="aa">
<div class="bb">sffsssssssssssss</div>
<div class="cc">sffss</div>
</div>

css:
.aa{ border:1px solid #000; background:#CC4;overflow:hidden;}
.bb { border:1px solid #f00; background:#999; float:left;}
.cc{ border:1px solid #f00; background:#999; float:left;}

============================================================

CSS hack技术

.color{
background-color: #CC00FF; /*所有浏览器都会显示为紫色*/
background-color: #FF0000\9; /*IE6、IE7、IE8会显示红色*/
*background-color: #0066FF; /*IE6、IE7会变为蓝色*/
_background-color: #009933; /*IE6会变为绿色*/
}

---------------------------------------------------------------

background: red; /* 对FF Opera和Safari有效 */
#background: blue; /* 对 IE6 和 IE7有效 */
_background: green; /* 只对IE6有效 */
/*/background: orange;*/ /** 只对IE8有效 **/
!important /*FF、IE7有效*/
* /*IE都有效*/
============================================================

你可能感兴趣的:(chrome)