在不兼容IE中推動發展

本文轉載自查看原文 2012-08-06 00:26 1789 css/html

眾所周知IE瀏覽器兼容問題是最頭痛最頭痛的事情了。

在不影響功能的前提下，不知道各位有沒有放棄IE中樣式兼容性問題。

在處理IE兼容性問題，大牛們采用了各種各樣的方式，使IE向其他瀏覽器靠攏，這也是問題的關鍵點？！

咋一看，這樣是帶來了好處是在IE也達到了同樣的效果。

然而，其中以藏着一個巨大的問題，用戶一直使用着固有的瀏覽器，沒有讓用戶真正感受到瀏覽器已經發生跨時代的轉變，當然用戶也不關心這些事情。

僅想說明，放棄兼容IE6-IE8中的css3兼容性，讓用戶真正體驗到變化，讓用戶自己選擇。

這樣能在不兼容IE中推動發展。

下面兩張效果圖：

1、現代瀏覽器中的顯示效果：

2、IE8中的效果

css樣式：
1、浮動布局

2、圓角、陰影和漸變

html結構：

<div class="mdiv">
     <dl>
           <dt>
                 花花
           </dt>
           <dd>
                 花是一種用來欣賞的植物。
            </dd>
      </dl>
      <img alt="" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_f.jpg" />
</div>

實例效果：

<!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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 IE中iframe兼容性問題前端制作中，IE6還有必要兼容嗎？ bootstrap中關於兼容ie8 和 rem的問題總結 flex不兼容ie9 echarts如何兼容IE8 websocket兼容IE8 videojs兼容IE8 EasyUI兼容IE問題 ie9 placeholder兼容讓forEach兼容IE8