关于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设置为较小的值,在设置“vertical-align: middle;”时,IE8和FireFox是好了,但是Chrome又出问题了。如下图:

 

最后找的的解决方法:

将其写成:<button id=‘clear‘ class="defButton rightBtn listButton"><label>清除</label></button>

label的格式是:vertical-align: 0%;line-height:100%;

时间: 2024-12-20 07:06:52

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

IE8下div中2个按钮只显示一个

IE8下div中2个按钮只显示一个,代码如下: <div id="adviceType" style="display: none;" > <select name="adviceTypeOne" id="adviceTypeOne" class="shortselect" > <option value="-1">--请选择--</option

用swift实现navigation bar的完全透明 &amp; navigation bar中button的字体大小调整

这几天在项目中遇到的关于navigation bar的一些小问题以及解决的方法记录一下吧: 1.  完全透明navigation bar 有时候我们想要navigation viewcontroller顶部的navigation bar变得完全透明,我们首先想到是从story board下手,但是尝试了半天,也不能达到完全透明的效果 选择这里的Translucent Navigation Bar只能让bar变成那种可以稀释背景色的毛玻璃的效果,那么究竟应该如何才能把整个navigation ba

Android中button点击后字体的变色效果

button的点击效果无疑是非常简单的,以致于我懒到当UI告诉我说在点击的时候button字体的颜色也要随着背景改变的时候我毫不犹豫的告诉他让他切两个图过来,后来想想着实是不太靠谱,于是了解了一下如何添加button点击的字体颜色变化效果. 1.首先你要在你的color文件下加入几个你需要的色值,注意不同的是不是一般的color标签,而是drawable标签,就像这样: <drawable name="color_red">#fffa3d39</drawable>

Photoshop脚本 &gt; 遍历系统中的所有字体

源自:http://coolketang.com/tutorials/menu1lesson7.php 本节将演示如何使用脚本,查看系统中所有可用字体.首先创建一个空白的脚本文档,并保存在硬盘上某个位置. 并输入脚本代码: var fonts   = app.fonts; var message = ""; 新建一个变量[fonts],它是一个数组,用来存储系统中的所有字体.新建一个变量[message],它的默认值为空.这个变量将在后面的代码中起到保存字体信息的作用. for(var

解决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

IE8下div中2个button仅仅显示一个

IE8下div中2个button仅仅显示一个,代码例如以下: <div id="adviceType" style="display: none;" > <select name="adviceTypeOne" id="adviceTypeOne" class="shortselect" > <option value="-1">--请选择--<

网页中导入特殊字体@font-face属性详解

@font-face { font-family: 'icomoon';/*自定义字体名称*/ src:url('../fonts/icomoon.eot?rretjt');/*自定义字体的路径*/ src:url('../fonts/icomoon.eot?#iefixrretjt') format('embedded-opentype'), url('../fonts/icomoon.woff?rretjt') format('woff'),/*format为字体格式 便于浏览器识别*/ u

简单CSS hack:区分IE6、IE7、IE8、Firefox、Opera

一.跨浏览器的网页设计一直是让人很头疼的问题,这不只是因为浏览器的版本众多,还有一个重要的原因是相同浏览器的不同时期的版本也会有差异,甚至是在不同操作同台上还会有不同.因此使CSS hack技术进行浏览器区分是实现跨浏览器访问一个好方法.CSS Hack技术有很多,具体可以查看:    本文据说的主要是通过".",">","*","_"来区分.以下是本人对这四种符号的测试结果: -------IE6--     IE7-

[Learn AF3] App Framework 3.0中的内置矢量图标

AF3的内置矢量图标 介绍:要使用af3中的图标,必须首先引入icon.css,由于文件中已经内置了字体文件数据,因此不需要引入字体文件支持. <link rel="stylesheet" type="text/css" href="js/af3.0/icons.min.css" /> 使用:引入icon.css文件之后,我们就可以通过给需要显示图标的元素添加css类名来显示图标(实际上就是一个矢量字符),注意需要同时添加icon 和