input、button、a标签 等定义的按钮尺寸的兼容性问题
2016-10-11 11:10
627 查看
在项目中有遇到这类问题,搜索了一下解决方式,采用链接:https://segmentfault.com/q/1010000000190931 里各位楼主的答案,摘抄如下:
例子如下:
HTML:
CSS:
方法一:
①Firefox浏览器会默认设置input[type="button"]的行高为normal。quot: http://www.cssnewbie.com/input-button-line-height-bug/#.UXDOLLVTCEw,如下
把行高统一设置为normal,可以解决一部分问题。
②Firefox在私有属性里面额外设置了边框和留白,去掉即可。
现在Firefox也表现一致了。
③最后,再针对ie7以下的button和input[type=button]随着字变宽的问题做Hack。
方法二:
注意:
这个主要是ff和opera下line-height对input['button'],button不起作用,还可以用padding来做,先把line-height置为normal,
补充一句,chrome和firefox会认为type为button的按钮为border-box盒模型,当然IE也是,但是a却以正常的content box盒模型渲染,所以,为了渲染一致,你需要将button声明为content-box。火狐按钮button的宽度,padding置为0是不顶用的,需要使用私有属性,
另外,IE9的button宽度在字数超过八九个汉字的时候带有小数点,这个得测测,一般按钮宽度不会超过这么多的字数。 详见此贴:http://bbs.blueidea.com/forum.php?mod=viewthread&tid=3058884
例子如下:
HTML:
<button class="btn">Button</button> <input type="button" class="btn" value="Input Button"> <a href="#" class="btn">A Button</a
CSS:
.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:0; }
现在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标签与图片按钮水平对齐问题
- 去除input标签/button按钮原本样式 并利用js赋值,select 中Option的增加与删除
- input按钮的background-image属性兼容性问题
- input标签type=button时,如何禁用和开启按钮
- input标签placeholder属性IE8及以下版本的兼容性问题
- Web开发之Button按钮兼容性问题
- CSS按钮样式之button标签与input type=button的区别详解
- <button>标签里加交互性操作会有兼容性问题以及重绘问题。
- input[type='submit']input[type='button']button等按钮在低版本的IE下面,去掉黑色边框的问题
- button、input和a标签作为按钮时的区别
- 苹果手机上input的button按钮颜色显示问题
- input标签和button放在一行写:inline元素的空白间隙问题
- input标签中button在iPhone中圆角的问题
- a 标签里面的button 按钮 ie78下a链接无效的问题
- CSS按钮样式之button标签与input type=button的区别详解
- 兼容性问题:IE下可以透过盖在input标签上面的div点到input标签
- 关于A标签button按钮已经input获取…
- input、select等Form标签对其问题
- input 标签(file类型)在IE和FF里的兼容问题
- java:Applet布局问题,如何添加按钮,标签问题总结