开发者社区> 问答> 正文

如何保证各浏览器下 <input><button><a> 定义的按钮尺寸一样?

如题,定义了下列表单按钮:

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

screenshot

运行的时候,chrome 下按钮的大小一样了,但是 Firefox 和 IE 下尺寸又不一样了,有没有好的解决方法?

展开
收起
杨冬芳 2016-06-14 14:29:05 2424 0
1 条回答
写回答
取消 提交回答
  • IT从业

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

    ——

    2019-07-17 19:37:37
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
WEB浏览器中即将发生的安全变化 立即下载
基于浏览器的实时构建探索之路 立即下载
基于浏览器的实时构建探索之路--玄寂 立即下载