input、button、a标签等定义的按钮尺寸的兼容性问题

在项目中有遇到这类问题，搜索了一下解决方式，采用链接：https://segmentfault.com/q/1010000000190931 里各位楼主的答案，摘抄如下：

例子如下：

ＨＴＭＬ：

<button class="btn">Button</button>

<input type="button" class="btn" value="Input Button">

<a href="#" class="btn">A Button</a

ＣＳＳ：

.btn {

    font: 14px/21px Arial;

    border: 1px solid #DDD;

    padding: 5px 10px;

    background: #FFF;

    color: blue;

    text-decoration: none;

}

a {

    display: inline-block;

}

方法一：

①Firefox浏览器会默认设置input[type="button"]的行高为normal。quot: http://www.cssnewbie.com/input-button-line-height-bug/#.UXDOLLVTCEw，如下

button, input[type="reset"], input[type="button"], input[type="submit"] {

    line-height:normal !important;

}

把行高统一设置为normal，可以解决一部分问题。

.btn{

    line-height:normal;

}

②Firefox在私有属性里面额外设置了边框和留白，去掉即可。

button::-moz-focus-inner,

input[type="button"]::-moz-focus-inner { border:none; padding:; }

现在Firefox也表现一致了。

③最后，再针对ie7以下的button和input[type=button]随着字变宽的问题做Hack。

.btn {

    *overflow:visible ;

}

方法二：

注意：

这个主要是ff和opera下line-height对input['button'],button不起作用，还可以用padding来做，先把line-height置为normal，

button, input[type="button"], input[type="submit"] {

    line-height:normal !important;

}

input.button, a.button, button {

    font: bold 12px Arial, Helvetica, sans-serif;

    padding: 5px 8px;

}

补充一句，chrome和firefox会认为type为button的按钮为border-box盒模型，当然IE也是，但是a却以正常的content box盒模型渲染，所以，为了渲染一致，你需要将button声明为content-box。火狐按钮button的宽度，padding置为0是不顶用的，需要使用私有属性，

.btn input, .btn button { -moz-padding-start:npx; -moz-padding-end:npx; }

另外，IE9的button宽度在字数超过八九个汉字的时候带有小数点，这个得测测，一般按钮宽度不会超过这么多的字数。详见此贴：http://bbs.blueidea.com/forum.php?mod=viewthread&tid=3058884

巴特西

input、button、a标签等定义的按钮尺寸的兼容性问题

最新文章

热门文章

巴特西

input、button、a标签 等定义的按钮尺寸的兼容性问题

最新文章

热门文章

input、button、a标签等定义的按钮尺寸的兼容性问题