[TOC] ### ie6屏幕固定位置實現 Q:ie6固定位置，目前只有ie6不支持固定位置 A:可以試下以下代碼，親測有效。 ~~~ body{ background-image:url(about:blank); background-attachment:fixed;/*必要，防抖動*/ } .head{ position:fixed; top:0; left:0; _position:absolute; _top:expression(offsetParent.scrollTop); _left:expression(offsetParent.scrollLeft); ~~~ ### 浮動雙倍間距 Q: 如題，塊級元素設置浮動時，第一個浮動元素的間距為雙倍的。（ie6中才有這個問題） A:display:inline ### 透明圖片的處理 Q: 圖片的透明處理 :ie7 8支持透明圖片等，ie6不支持。 A：以下方案適用于背景圖片。(濾鏡) ~~~ width:25px;height:35px; background:url(/images/hoseditsym.png) no-repeat !important;background-position:left center!important; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src ='/images/hoseditsym.png'); _background-image: none; FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src ='/images/hoseditsym.png') ~~~ ### 文檔渲染模式設置 Q: 有些頁面現代瀏覽器正確，但有些樣式被ie解析錯誤，可以嘗試下修改文檔的渲染模式 A:代碼如下：針對360的兼容模式，可以加特殊的meta標記renderer ~~~ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="renderer" content="webkit"> ~~~ ### ie不支持placeholder Q: 如題，測試希望ie也能支持placeholder(ie678均不支持) A:引入插件，注意的是針對ie寫條件注釋引入，另外如果不要求做這部分，可以不寫。親測可以支持ie78顯示提示文字，ie6不可以。 參考：[github地址](https://github.com/mathiasbynens/jquery-placeholder)，修改樣式可以直接修改，文件可以通過bower加載。 ~~~ <script type="text/javascript" src="jquery.placeholder.min.js"></script>.placeholder { color: #aaa; } <style> .placeholder { color: #aaa; } </style> <script type="text/javascript"> $(function(){ $('input, textarea').placeholder(); }); </script> ~~~ ### 如何讓ie支持響應式，h5,css3的選擇器以及部分屬性 Q: 如題 A:參考html代碼規范文檔，有詳細說明，引入補丁文件即可。 ### js文件里針對ie寫腳本 Q: 如題 A:代碼如下：建議用jq的語法，簡潔有效。1.x版本對ie678可用，2.x版本不再支持ie678。pc端統一建議并規范使用jq1.12.1版本 $.support.leadingWhitespace ,如果是ie678 返回false，如果是其他的，返回true;如果需要判斷其他特殊的css屬性支持情況，可以參考$.support的其他屬性值。(如果需要判斷版本，可以使用$.browser.version). 也可以用取巧的辦法，針對字符串的解析結果做判斷，代碼如下：`（!+[1,]）`，ie6-8返回false,其他返回true. ### 一些js對象的方法ie不支持怎么辦 Q: 如題，比如String.trim(),isArray，every(), filter(), forEach(), map(), some() ，Date.now() A:代碼如下：需要自己寫替代的函數方法，比如去除前后的空格，如果jq的工具方法中有，可以直接用，$.trim(str) `return this.replace(/(^\s*)(\s*$)/g, ""); ` ### 最大最小寬度高度不支持怎么辦 Q: 如題，我們經常會寫最大最小寬度的限制來保證頁面的正確，可是ie6不支持，ie78支持。 A:css hack寫法 ~~~ min-height:50px; height:auto!important; height:50px; ~~~ ### 設置透明（容器內容不想被透明） Q:opacity與rgba A:兩者皆可以調整我們想要的塊（區域）的透明度，然而這兩個屬性又有所不同，opacity調整了整個區域的透明度（包含區域內的內容），rgba則可調整區域背景的透明度。所以當我們想做一個透明的按鈕時可以選擇后者。 兩者的用法：opacity: 0.5；rgba(255,255,255,0.5) ~~~ /*透明度 兼容寫法*/ background: rgba(244 ,219, 187, 0.6); filter:progid:DXImageTransform.Microsoft.gradient (startColorstr=#99F4DBBB , endColorstr=#99F4DBBB ); ~~~