众所周知IE浏览器兼容问题是最头痛最头痛的事情了。
在不影响功能的前提下，不知道各位有没有放弃IE中样式兼容性问题。
在处理IE兼容性问题，大牛们采用了各种各样的方式，使IE向其他浏览器靠拢，这也是问题的关键点？！
咋一看，这样是带来了好处是在IE也达到了同样的效果。
然而，其中以藏着一个巨大的问题，用户一直使用着固有的浏览器，没有让用户真正感受到浏览器已经发生跨时代的转变，当然用户也不关心这些事情。
仅想说明，放弃兼容IE6-IE8中的css3兼容性，让用户真正体验到变化，让用户自己选择。
这样能在不兼容IE中推动发展。
下面两张效果图：
1、现代浏览器中的显示效果：
2、IE8中的效果
css样式：
1、浮动布局
2、圆角、阴影和渐变
- 花花
- 花是一种用来欣赏的植物。
实例效果：
<!DOCTYPE html> <html> <head> <title>在不兼容IE中推动发展</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> *{margin:0px;padding: 0px;} body { background-color: #F6F6F6; } #main { width:630px; padding: 20px 10px 20px 20px; margin: 100px auto 0px; overflow: hidden; border:1px solid #CCCCCC; box-shadow: 0px 1px 0px #FFFFFF; border-radius: 10px; } .mdiv { width: 180px; padding: 10px 10px 10px 10px; margin: 0 10px 10px 0px; overflow: hidden; cursor: pointer; float:left; _display:inline; background: #FFFFFF; border-radius: 6px; box-shadow: 0px 3px 0px rgba(0,0,0,0.1); } .mdiv:hover { background: -moz-linear-gradient(top, #FF0000, #FFFFFF) ; background: -webkit-linear-gradient(top, #FF0000, #FFFFFF); background: -webkit-gradient(linear,top,from(#FF0000),to(#FFFFFF)); background: linear-gradient(top, #FF0000, #FFFFFF); } .mdiv img { border-radius: 4px; } .mdiv dl { display: inline-block; width: 108px; float:right; } .mdiv dt { font-weight: 700; margin-bottom: 10px; } </style> </head> <body> <div id="main"> <div class="mdiv"> <dl> <dt> 花花 </dt> <dd> 花是一种用来欣赏的植物。 </dd> </dl> <img alt="" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_f.jpg" /> </div> <div class="mdiv"> <dl> <dt> 花花 </dt> <dd> 花是一种用来欣赏的植物。 </dd> </dl> <img alt="" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_f.jpg" /> </div> <div class="mdiv"> <dl> <dt> 花花 </dt> <dd> 花是一种用来欣赏的植物。 </dd> </dl> <img alt="" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_f.jpg" /> </div> <div class="mdiv"> <dl> <dt> 花花 </dt> <dd> 花是一种用来欣赏的植物。 </dd> </dl> <img alt="" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_f.jpg" /> </div> <div class="mdiv"> <dl> <dt> 花花 </dt> <dd> 花是一种用来欣赏的植物。 </dd> </dl> <img alt="" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_f.jpg" /> </div> <div class="mdiv"> <dl> <dt> 花花 </dt> <dd> 花是一种用来欣赏的植物。 </dd> </dl> <img alt="" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_f.jpg" /> </div> <div class="mdiv"> <dl> <dt> 花花 </dt> <dd> 花是一种用来欣赏的植物。 </dd> </dl> <img alt="" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_f.jpg" /> </div> <div class="mdiv"> <dl> <dt> 花花 </dt> <dd> 花是一种用来欣赏的植物。 </dd> </dl> <img alt="" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_f.jpg" /> </div> <div class="mdiv"> <dl> <dt> 花花 </dt> <dd> 花是一种用来欣赏的植物。 </dd> </dl> <img alt="" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_f.jpg" /> </div> </div> </body> </html>
运行代码