一些小技巧
以下是本人在前端开发过程中,碰到的一些问题以及解决方法,当然有些方法依然有问题,之后会长期更新,更新时间不定
注:所有IE测试环境为IE8+,更低版本IE不予考虑
1、使用CSS去掉iPhone网页上文本框及按钮的圆角
在使用iPhone浏览网页时,按钮总是会显示超大圆角并且颜色由上到下渐变的样式,而且文本框也会有一定的圆角,这样与我们定义的样式肯定不一致,但是,即使我们将样式定义为important也依然没有效果,原来是因为这是webkit内核浏览器通过私有属性-webkit-appearance对控件设置了默认样式,那既然知道了,那就好办了,去掉默认样式呗,如下:
1 input[type='submit'], 2 input[type='reset'], 3 input[type='button'], 4 input[type='text'] { 5 -webkit-appearance: none; 6 }
接下来,我们自定义的样式就可以派上用场了
2017-03-15 14:45:00
2、使rgba()函数兼容IE8
在实现背景透明的时候,使用了CSS3的rgba()函数,
background-color: rgba(0, 0, 0, .5);
但是在兼容到IE8的时候发现,这种较老的浏览器并不支持这个属性,那么是不是就没办法了呢?
No,IE有个叫做滤镜的东西,可以让我们来耍耍!
我们现在要用到的是关于颜色变化的方法,so,语法就像下面这样:
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);
这个本来是用来做渐变的,但是我们这边只是为了实现透明像素而已,所以不需要改变颜色,直接使用同一个颜色就好
解释下#7f000000的意思,这个是要分成两部分的,其中#之后的7f表示的是透明度.5对应的IEFilter值,从0.1到0.9均对应一个IEFilter值,对应关系如下:
rgba透明值 | IEFilter值 |
0.1 |
19 |
0.2 |
33 |
0.3 |
4C |
0.4 |
66 |
0.5 |
7F |
0.6 |
99 |
0.7 |
B2 |
0.8 |
C8 |
0.9 |
E5 |
IEFilter值与rgba()函数中的alpha转换关系为:alpha*255,小数位直接舍去不进位,再转换成16进制就是对应的IEFilter值
而在7f之后的六位数值,就是十六进制的颜色值了,要跟rgba()中的取值相同
至此我们的rgba()函数就能够兼容IE8了,恩,还是不错的
BUT,这个filter也支持IE9,会在IE9下造成reba()和filter重叠,透明效果变差,那么,就改下咯
将样式添加到需要使用rgba()函数的页面上,而不是放到css样式表文件中,并且,只在浏览器版本低于IE9时才让其起作用
<!--[if lt IE 9]> <style> .filter-ele { background-color: rgba(0, 0, 0, .5); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000); } </style> <![endif]-->
恩,这个还是可以的
ok,以上便是开发过程中遇到的IE8兼容rgba()函数的问题及解决方法,有啥问题请指出,谢谢!
2017-05-05 17:04:00
3、a[href='javascript:void(0);other words']在FF、IE中与在Chrome中表现不一致
在开发过程中,总是会有一些奇奇怪怪的需求和一些奇奇怪怪的写法,就比如下面这种写法
<a href="javascript:void(0);2"></a>
这是一个分页插件中页码部分的代码,其中的2表示第几页,"javascript:void(0);"是添加的前缀,添加这个本来是为了禁止a标签进行跳转的,在Chrome下表现与预想一致,但是在FF和IE下的表现就不如预想了,依然还是会发生跳转,跳转路径就是href指定的url
其实有个更简单的方法被遗忘了,那就是直接在点击事件发生时,禁止a标签的默认事件,这样还可以将添加的前缀省去
注:要注意a标签[href="javascript:void(0);"]时,若在";"字符之后再添加其他字符,则会出现浏览器表现不一致的问题
2017-05-11 16:22:00
4、IE9、IE8浏览器请求后台数据格式为json,变成需要下载文件的问题
在IE9、IE8浏览器实现无刷新进行图片上传裁剪预览时,后台返回的数据是返回到一个隐藏的iframe中的,但若此时后台返回的数据格式是json时,将会导致浏览器提示需要下载文件
解决方式是,改变后台返回的json数据为string类型,在前台使用JSON.parse()方法进行数据解析
注:感觉这方法有点太暴力了,若后台是封装好的返回格式,这就很难改了,问题有点大啊,只在前端实现的IE8、9的图片上传裁剪加预览果然还是要使用flash吗?
2017-12-25 14:43:00
5、button元素内部内容在IE和Firefox浏览器中,无法被鼠标选中
在IE和Firefox浏览器中,button元素内部的标签和文字是没办法被鼠标选中的,也就是说,加在button元素内部标签上的事件,将不会被触发,而在Chrome和Edge浏览器中则没有这个问题
测试浏览器:IE11,10,9,Firefox最新版(57.0.2 (64 位),window版本)
2018-03-05 19:37:00
6、改变input标签placehold颜色
有些时候我们可能需要改变下input标签里面placehold提示的颜色,可以使用以下css
E::-webkit-input-placeholder { /* webkit browser */ color: blue; } E:-moz-placeholder { /* Mozilla FireFox 4 - 18 */ color: blue; } E::-moz-placeholder { /* Mozilla FireFox 19+ */ color: blue; } E:-ms-input-placeholder { /* IE 10+ */ color: blue; } E::-ms-input-placeholder { /* Edge */ color: blue; }
效果:
测试浏览器:IE10+,Chrome,Edge,Firefox
好了,以上便是开发过程中遇到的一些问题以及解决方法,有问题请指出,一起探讨,一起进步,谢谢!
世界 -- 因技术而精彩