兼容性
web端 css
-
IE低版本图片默认有一个边框
解决方法:添加border:none;属性,最好是在reset.css中添加此属性。
-
IE6/7不支持border:none
一般浏览器都会支持的,但是如果非要兼容IE低版本,可以使用border:0,不存在兼容性问题;
-
IE8输入框的内容偏上显示
这里如果设置line-height = height,IE下问题可以解决,但是safari中输入框的内容又偏上了。所以可以选择用IE的专属Hack也可以设置padding让其居中。
-
IE输入框后面自动添加一个叉号
input:-ms-clear{ display:none; }
-
IE6元素最低高度为19px
设置低于19px的高度,会不生效,如果想小于这个高度,只能通过添加其它属性。
-
IE8及以下不支持nth-of-type/nth-child()
-
IE8不支持border-radius等属性
关键属性设置 需要把路径设置好
behavior: url(PIE.htc); -
IE8不支持window.innerHeight
可以通过
document.body.clientHeight;
获取,也可以通过jQuery的height()方法获取var h = window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight; var h = $(window).height();
-
IE10以下不支持placeholder
利用jQuery的插件jquery.placeholder.min.js实现,但是出来的效果,字体颜色是黑色的
<script src="jquery.placeholder.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> $(function(){ $('input, textarea').placeholder(); }); </script>
-
IE、360不支持window.location.href自动下载服务端以文件格式返回的数据
服务端把请求头的数据格式改成
application/octet-stream
就是直接以文件格式返回,在浏览器直接下载。但是ie、360
中使用window.location.href
就会直接去跳转页面了。 -
不同浏览器对 解析不同
尤其是搜狗,太狗了,差那么多!!给网页设置统一字体类型font-family即可
font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
-
利用IE滤镜实现一些不支持的属性
- 实现rgba
header{ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7fffffff,endColorstr=#7fffffff); }
- 实现opactiy
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
- 实现背景样式
{ background-image: url('a.jpg'); background-size: cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='a.jpg', sizingMethod='scale'); }
图片的路径url和src必须一样,同时路径都必须是绝对路径,全路径,才可以,否则会出错
-
如果图片加a标签在IE9-中会有边框
img{border:none}
-
默认的
body
没有body
去掉margin
情况下ie5、6、7边缘会很宽margin-top加倍 如果处于无声明状态那么所有的ie浏览器margin-top加倍解决方案:用
css
给body
添加magin
属性为0px -
height
不能小于16px,设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置高度解决方案:
overflow
设置为hidden
-
min-height
不兼容 ie6 7解释为超过高度就撑开,而其他版本浏览器则遮盖下面的层min-height:200px; height:auto !important; height:200px; overflow:visible;
-
position:fixed IE5 6无法识别此属性
-
浮动的div有
margin_left
属性ie6会加倍 无论兼容视图还是无声明视图IE6唯一识别属性_的方式加
_display
属性_display:inline
-
png图片 IE6里面的png图片不能透明 兼容版本和无声明版本都是
-
img浮动 img标签打回车会造成每个图片之间有缝隙
解决方案:可以删除之间的回车键也可以让这些图片浮动
-
在IE浏览器下
input type="text"
文本框点击时后面会出现"X",以及type="password
"后面会出现眼睛,如何除去这两种默认样式::-ms-clear,::-ms-reveal{display:none;}
-
CSS3前缀 -webkit- webkit渲染引擎 chrome/safari
-moz- gecko渲染引擎 firefox
-ms- trident渲染引擎 IE
-o- opeck渲染引擎 opera
动画、过渡、
background-size
都需要加前缀 -
PIE.htc
可以实现很多
css3`属性在IE下的兼容性 如:圆角、阴影、渐变
web端 js
移动端 js
-
移动端
300ms
延迟-
移动端浏览器
click
事件为什么会有300ms
的延迟呢?因为在手机上有个双击方案 —— 在手机上快速点击两下,实现页面放大;再次双击,恢复到原始比例。那它是如何实现的呢?浏览器在捕捉到第一次点击事件后,会等待一段时间,如果在这段时间内,用户没有再次进行点击操作的话,就执行单击事件;如果用户进行了第二次点击操作的话,就会执行双击事件。这段等待的时间大约
width=device-width 宽度为设备宽度 initial-scale=1 初始比例为1 maximum-scale=1 最大比例为1 minimum-scale=1 最小比例为1 user-scalable=no 用户不能进行放大缩小300ms
。
-
-
1px
像素问题-
伪类 + transform
看代码: -
.border1 height: .5rem position: relative .border1:before position: absolute top:-.5rem left:0 content: '' width:100% height:1px border-top:1px solid rgba(0,0,0,.3) transform: scaleY(0.5)
-
这种方式的原理很简单,就是把原先元素的
border
去掉,然后利用:before
或者:after
重做border
,并transform
的scale
缩小一半,原先的元素相对定位,新做的border
绝对定位。
-