解决Firefox下input button内文字垂直居中

众所周知，在Firefox下input type=”button”的文字是不好居中的，原因在于Firefox自己比较二，弄了个私有属性，导致以下问题的出现：

按钮左右本身有2px的间距（FF私有属性写了padding:0 2px所致）；
按钮文字居中是不行的（此时设置padding-bottom是没用的）；
等等…

1 input[type="reset"]::-moz-focus-inner,
2 input[type="button"]::-moz-focus-inner,
3 input[type="submit"]::-moz-focus-inner,
4 input[type="file"] > input[type="button"]::-moz-focus-inner{
5     border:none;padding:0;
6 }

解决Firefox下input button内文字垂直居中,布布扣,bubuko.com

时间： 2024-10-21 02:07:37

解决Firefox下input button内文字垂直居中的相关文章

关于IE8与FireFox中，button内字体总是有一个不垂直居中的问题

button的代码是这样子的:<button id='clear' class="defButton rightBtn listButton">清除<button>. 原因分析,因为两个浏览器默认button的样式中,border及padding的宽度不一致导致,但限制button的height.font-sizing.line-height和border-box时,会出现字体垂直位置不一致的问题. 而如果我只是将line-height设置为较小的值,在设置&q

用label标签解决IE下input按钮点击或者submit按钮的黑边框

如果我们把input的type设置为submit,是的,提交表单经常需要submit按钮,就像下面这样: .代码 <inputtype="submit"class="button"value="登录"/> 你会发现submit初始状态就是这种焦点获取的黑框样式:精心开发5年的UI前端框架! 怎么办?如果设置border:none,也就是说不要border,那么这种黑框就没有了,所以有种解决办法是直接把框写死到背景上,然后去除bord

IE下input框内有一把小叉子

IE浏览器中,使用datepicker插件时,input选择框出现了一把小叉号,而其他浏览器运行正常这个时候只需要在CSS中添加 input::-ms-clear{display: none;} 就可以解决,也可以通过CSS3中的属性选择器针对特定选择框进行处理,比如: input[type=search]::-ms-clear{display: none;} /*清除IE下的 search 叉号*/ input[type=text]::-ms-clear{display: none;}

解决iOS下input和fixed 问题

在ios下如果页面底部有fixed 元素当有input输入框触发键盘时fixed会浮动在页面出现展示总是解决方法有很多种,但是要根据实际需要更改方法一.css解决(弊端:当有大面积input元素时会出现滑动不顺畅问题) //这里给内容区域设置 position:absolute,并且设置一个距离fixed的底部距离 .main{ position:absolute; bottom:rem-calc(80px); //fixed元素的高度 top:0; left:0; width:100%;

如何解决firefox下window.event的问题

一.在函数中传递event参数在函数中传递event参数,这样我们就可以兼容IE和FF的event的获取了,如下面的函数: function _test(evt){ var src = evt.srcElement || evt.target; // 获取触发事件的源对象 alert(src.value); // 打印该对象的value属性} 那么我们在使用的时候就应该这样: <input type='button' value='click me' onclick='_test(

浏览器的兼容模式下的button中文字垂直方向不居中显示

<button style="cursor:pointer;vertical-align: middle;" >删除</button> 这时候垂直不居中. <button style="cursor:pointer;vertical-align: middle;height:21px;" >删除</button> 这时候垂直居中了.对它添加了height样式.

React-Native组件之Text内文字垂直居中方案

1 style: { 2 height: 100, 3 textAlign: 'center', 4 textAlignVertical: 'center', 5 } 以上方法在Android上显示水平垂直居中, 但在IOS上只能水平居中, 方法是在IOS上添加lineHeight: 100, 如下 1 style: { 2 height: 100, 3 textAlign: 'center', 4 textAlignVertical: 'center', 5 ...Platform.selec

css解决td单元格内文字溢出

td单元格内显示的文字太长时,总是会自动分行,把表格撑高了,或者密密麻麻的一片,总是不好看~ 俺一开始的做法是用php的mb_substr()来截取定长的字符串,但是,因为中英文字节的差异,比如,10个中文字符就比10个英文字符要长得多,在网页上显示起来就忽长忽短,无法对齐,很不美观~ ~解决办法~ 第一步:<table>标签加样式:style="table-layout:fixed;"(一定要加,否则下面定义的td的样式都不起作用了) 第二步:<td>加样式:

select中文字垂直居中解决办法

我们知道select标签在各个浏览器中的属性和各浏览器的支持各有些不同,从而造成select选择框在各浏览器的显示有不同,下面我们通过对主要外形CSS属性的支持,打造全兼容select. 我对select的height.padding.line-height分别利用控制变量的方法写了个DEMO在各浏览器上测试三种情况:height.100.padding.0.height.no.padding.100.no.height.no.padding,结果如链接图片各浏览器DEMO外观我们可以得