[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 );
~~~
- 前端入門
- 前端入職須知
- 前端自我定位
- pc與手機頁面差別
- 前端書單
- 前端種子計劃
- 前端技術棧
- ps
- ps入門階段
- html
- html入門
- html代碼規范
- meta
- table
- iframe
- a標簽詳解
- image
- html代碼審查工具
- h5專題
- h5入門
- h5新增屬性
- canvas畫布教程
- audio/video
- Geolocation
- Websockets
- Web storage
- Communication
- Web Workers
- requestAnimationFrame
- css
- css入門必學
- css代碼規范
- 項目字體規范
- css基本位置布局
- css常見樣式命名規則
- css代碼優化建議
- css常用樣式名
- css選擇器攻略
- css盒子模型的理解
- css屬性繼承與默認值
- css代碼審查工具
- css中常見的知識盲區
- css3新特性淺談
- css新特性了解
- border-radius
- background
- transform
- animation
- white-space
- css常用技術
- 文本兩端對齊
- css之浮動解決方案
- css優化建議
- 文本超出省略
- img-sprites
- rem布局教程
- 水平居中&垂直居中
- 固寬&變寬布局
- 寬高固定比例的盒模型
- 樣式預處理語言
- less教程
- sass教程
- postcss教程
- js
- javascript入門
- js代碼規范
- js基礎拓展
- js代碼審查工具
- js性能優化
- js基本語句
- 基本運算
- 基本語句語法
- js對象
- es6入門
- obj
- Array
- Date
- String
- Boolean
- Number
- Json
- RegExp
- Math
- function
- jquery入門
- jq核心思想
- jq基本語法
- jq插件庫匯總
- js常用技術
- break&continue區別
- js對日期轉換
- js控制運動-move.js
- 原生js-cookie語法
- ajax請求后回調
- 表單數據序列化
- zepto
- zepto入門
- 百度touchjs
- js編程
- 插件庫
- 功能性插件
- pdfjs
- wdatepicker
- qrcoder
- barcode插件
- photoviewer
- hammer.js
- echarts
- 交互組件
- layerjs
- java
- java入門
- java基本語句
- springMVC
- javaweb
- vm模板引擎
- freemarker
- maven教程
- mySql教程
- flex教程
- flex入門
- git教程
- git入門
- git分支
- git-tag管理
- git注意事項
- git-torise入門
- ide-git插件使用
- web
- web兼容
- web兼容思想
- pc端兼容適配文檔
- pc端兼容bug匯總
- ie兼容bug匯總
- 手機兼容bug匯總
- web安全
- jeecms
- web存儲
- app/h5組件
- 安卓教程
- ios教程
- 前端教程
- rubikx的教程
- 其他
- artTemplate
- tmod使用
- 跨域問題
- markdown教程
- 常用工具
- postman-api調試
- web常識
- 瀏覽器ua統計
- ui框架
- easyui
- bootstrap
- 入門推薦
- weui
- sui-pc
- sui-mobile
- layerUi