一些小技巧

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

注：所有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值，对应关系如下：

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

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

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有