css样式设置遇到的那些坑（1）

css样式设置遇到的那些坑（1）

1.Button 按钮的点击时候出现蓝色边框

解决方案：添加css样式属性。

 button{
    outline:none;
}

棘手2：谷歌浏览器中button按钮的边框怎么去除？
解决方案：设置这个就看不到那个框了。

:focus{
    outline: 0;
}

【拓展】很多设计师喜欢使用：{outline:none;} 或者：focus {outline:none;}
来解决焦点粗虚线框的问题。

棘手3：使用上边方法，对于button在Firefox下还是会有虚线框的。
解决方案：
需要使用Mozilla的一个私有属性：-moz-focuse-inner。不过这里有一点大家需要特别的注意：通过“-moz-focus-inner”并不是重置“outline”这个属性的值，而是需要通过他来改变buttons的“border”样式。代码如下：

input::-moz-focus-inner,
button::-moz-focus-inner {
    border: 0;
}

【对症下药】
　　上面写是包括了所有的input，但有时我们并不想这个值对“input[type=text]”有影响，那么我样其实可以这样来设置：

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;
}

【总结】
　　通过上面的代码，那个难看的虚线框，我们就可以顺利地移除了。
　　同时，其实我们需要对button的outline进行这样的设置,才能达到所有浏览器一样的风格效果：

:focus {outline:none;} 　　/*for IE*/
::-moz-focus-inner {border-color: transparent;} /*for mozilla*/

这样，表单button得到焦点，在各浏览器下的渲染效果就一致了。