zoukankan      html  css  js  c++  java
  • Firefox的-moz-focus-inner

    Firefox中,::-moz-focus-outer::-moz-focus-inner伪元素主要针对按钮类型的元素,包括button类型, reset类型以及submit类型。

    button使用行高让文字垂直居中,但是在firefox里文字会偏下,而且点击的时候中间会有一个虚线框。Firefox的button系统样式如下:

    button::-moz-focus-inner, input[type=”reset”]::-moz-focus-inner, input[type=”button”]::-moz-focus-inner, input[type=”submit”]::-moz-focus-inner, 
    input[type=”file”] > input[type=”button”]::-moz-focus-inner
    {   border: 1px dotted transparent;   padding: 0 2px; } button:-moz-focusring::-moz-focus-inner, input[type=”reset”]:-moz-focusring::-moz-focus-inner, input[type=”button”]:-moz-focusring::-moz-focus-inner,
    input[type=”submit”]:-moz-focusring::-moz-focus-inner, input[type=”file”] > input[type=”button”]:-moz-focusring::-moz-focus-inner
    {   border-color: buttontext; }

    解决方案:

    button::-moz-focus-inner, input[type=”reset”]::-moz-focus-inner, input[type=”button”]::-moz-focus-inner,
    input[type=”submit”]::-moz-focus-inner, input[type=”file”] > input[type=”button”]::-moz-focus-inner
    {   border:none /*去虚线框*/;   padding:0; }

      

    其实对于button的outline设置需要这样来设置,才能达到所有浏览器一样的风格效果:

    :focus {
        outline:none;    /*for IE*/
    } 
    ::-moz-focus-inner {
        border-color: transparent;    /*for mozilla*/
    } 
  • 相关阅读:
    【mybatis-SqlSession的方法总结】
    【项目中遇到的一点问题】
    【request获取用户请求ip】
    【Linux入门】
    【linux学习-centeros】
    java Map 映射
    Java Set接口
    Java 泛型
    Java集合框架---重构设计
    Java 数据结构之双链表
  • 原文地址:https://www.cnblogs.com/surahe/p/6001404.html
Copyright © 2011-2022 走看看