美文网首页
一些浏览器兼容性问题

一些浏览器兼容性问题

作者: 笨笨的小蜗牛_用生命奔跑 | 来源:发表于2018-03-08 09:43 被阅读0次

    1、select

    select箭头在各个浏览器显示不一致。为了达到统一性。就必须去掉默认样式,替换上自己的样式。代码如下:

    所有主流浏览器都不支持 appearance 属性。

    appearance对ie、opear浏览器不支持。-moz-appearance支持火狐,-webkit-appearance支持safari和谷歌;

    对于select::-ms-expand{}只兼容到ie10。

    2、placeholder

    placeholder是h5的新属性,IE10以前的浏览器(8、9)不支持此属性。

    第一种方法用插件jquery-placeholder,这是借鉴别人的。有点麻烦,先记着吧

    注:此插件和jquery validate混合使用时,密码框password会略过校验,因为新生成的input并没有name属性。解决方法:点击提交按钮时,用js代码给新生成的input添加name属性。。。


    3、opcaity

    题外记录:opcaity属性是用来定义透明度的,其值在0-1.0之间。但IE8及其以下的版本并不支持。

    在IE8上需用filter:alpha(opacity=?)来过滤,opacity的值在0-100间。

    4、box-sizing

    Internet Explorer、Opera 以及 Chrome 支持 box-sizing 属性。       Firefox 支持替代的 -moz-box-sizing 属性。

    -moz-box-sizing:border-box;/* Firefox */

    -webkit-box-sizing:border-box;/* Safari */

    假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。

    5、背景颜色rgba的兼容性

    rgba对IE不兼容。那只能用滤镜  filter: progid: DXImageTransform.Microsoft.gradient(startcolorstr=#66000000, endcolorstr=#66000000);

    这个颜色“#19ffffff”是由两部分组成的,第一部是#号后面的19,是rgba透明度0.1的IEfilter值。从0.1到0.9每个数字对应一个IEfilter值。对应关系如下:

    第二部分是19后面的六位。这个是六进制的颜色值。要跟rgb函数中的取值相同。比如rgb(255,255,255)对应#ffffff;都是白色。到这里,rgba的用法就可以兼容IE8了。

    相关文章

      网友评论

          本文标题:一些浏览器兼容性问题

          本文链接:https://www.haomeiwen.com/subject/szyefftx.html