zoukankan      html  css  js  c++  java
  • 一些开发技巧及兼容方法

    移除HTML5 input在type="number"时的上下小箭头

    第一种

    chrome下:

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button{
        -webkit-appearance: none !important;
        margin: 0; 
    }

    Firefox下:

    input[type="number"]{-moz-appearance:textfield;}

    第二种:

    将type="number"改为type="tel",同样是数字键盘,但是没有箭头。

    ie兼容css3中的box-shadow阴影效果

    方法一:可以使用IE的Shadow滤镜

    基本语法:filter:progid:DXImageTransform.Microsoft.Shadow(color=’颜色值’, Direction=阴影角度(数值),Strength=阴影半径(数值));

    注意:该滤镜必须配合background属性一起使用,否则该滤镜失效。

    IE下模拟css3中的box-shadow(阴影)代码:


    .box-shadow{  

        filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696',Direction=135, Strength=5);/*for ie6,7,8*/  

          

        -moz-box-shadow:2px 2px 5px #969696;/*firefox*/  

        -webkit-box-shadow:2px 2px 5px #969696;/*webkit*/  

        box-shadow:2px 2px 5px #969696;/*opera或ie9*/  

    }  

    方法二:有些js和.htc的hack文件可以实现IE中的阴影效果。

    ie-css3.htc是一个可以让IE浏览器支持部份CSS3属性的htc文件,不只是box-shadow,它还可以让你的IE浏览器支持圆角属性border-radius和文字阴影属性text-shadow。

    它的使用方法是:下载它并放到你的服务器目录

    在你的<head></head>里面写入下面的代码:

    这个脚本的缺点是IE只支持一部分的box-shadow值。需要注意:

    • 当你使用了这个htc文件后,你的CSS里面,只要写有box-shadow, -moz-box-shadow或-webkit-box-shadow的任何一种,IE就会渲染。
    • 当使用了这个htc文件后,你不能这样写box-shadow: 0 0 10px red; 而应该是box-shadow: 0px 0px 10px red; 否则IE中会失效。
    • 不支持RGBA值中的alpha透明度。
    • 不支持inset内阴影。
    • 不支持阴影扩展。
    • 阴影在IE中只会显示为黑色,不管你设置成其它什么颜色。

    方法三:使用jQuery的插件jquery.boxshadow.js插件的下载地址是http://www.hintzmann.dk/testcenter/js/jquery/boxshadow/jquery.boxshadow.js

    使用方法很简单,将该文件和jquery版本库引入head标签,插入以下js效果代码:



    <script type="text/javascript">  

              $(document).ready(function(){  

       if($.browser.msie) {  

         $('.obj').boxShadow(-10,-10,5,"#0cc"); //obj元素使用了box-shadow  

       }  

    });  

    </script>  

  • 相关阅读:
    js判断值是否为数字
    人脸识别 python调用face++ 功能测试
    【转载】Cesium基础使用介绍
    数据分析R&Python-Rpy2包环境配置
    VR/AR软件—Mirra测试(截至2017/11/13),使AR/VR创作更加便捷
    Cesium左右立体视觉续篇——遗留问题(渲染错误)以及临时替代方案
    在CesiumVR基础上实现3D左右立体视觉
    关于css样式的选择问题
    圣杯布局和双飞翼布局
    冒泡排序法
  • 原文地址:https://www.cnblogs.com/DemoJin/p/4767195.html
Copyright © 2011-2022 走看看