码迷,mamicode.com
首页 > 其他好文 > 详细

Firefox的-moz-focus-inner

时间:2016-10-26 20:03:35      阅读:257      评论:0      收藏:0      [点我收藏+]

标签:中间   线框   虚线   垂直居中   针对   firefox   需要   style   div   

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*/
} 

 

Firefox的-moz-focus-inner

标签:中间   线框   虚线   垂直居中   针对   firefox   需要   style   div   

原文地址:http://www.cnblogs.com/surahe/p/6001404.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!