去除input的默认样式以及IE的兼容性问题

input标签的默认样式带有一个黑色的边框以及激活状态会有一个的边框,如下:

input的默认样式和激活状态

在开发中,一般需要给输入框添加一个背景的效果,这时可以使用:

border: 0;   //去除边框

然后使用背景图片添加效果,同时它的激活状态产生的边框,可能与背景不搭,可以使用:

outline: 0;    //去除激活状态的边框

注意: ** border: none;也就是可以的,但是在IE6,7下存在兼容性问题,none**表示无,浏览器解析时就不做渲染,也就不消耗内存。

解决input的兼容性问题:

  1. 清除border的默认样式(border: 0;)
  2. 设置父元素的边框或背景图片
  3. 文本样式的设置(字体、颜色、行高等)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,866评论 1 92
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,281评论 19 139
  • 浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同问题症状:随便写几个标签,不加样式控制的情况下,各自的m...
    追卓2018阅读 1,444评论 0 2
  • 在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API。WebSocket提供了一...
    阳光嘚猴子阅读 444评论 0 5
  • 这是我参加思维导图武林计划的第30副图,主题为:电脑文件夹的整理。 中心图:选择电脑,比较明了 主干:根据电脑本有...
    郑郑老三阅读 473评论 1 2