[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