一些小技巧

以下是本人在前端开发过程中,碰到的一些问题以及解决方法,当然有些方法依然有问题,之后会长期更新,更新时间不定

:所有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透明值和IE下filter数值转换
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

 

好了,以上便是开发过程中遇到的一些问题以及解决方法,有问题请指出,一起探讨,一起进步,谢谢!

 

posted @ 2017-02-17 09:53  平凡世界平凡人  阅读(414)  评论(0编辑  收藏  举报