原生按钮实现加图标效果

最新推荐文章于 2023-01-10 14:09:34 发布

amy_fang

最新推荐文章于 2023-01-10 14:09:34 发布

阅读量1k

点赞数

分类专栏： html/css 文章标签： button javascript border scroll class ie

本文链接：https://blog.csdn.net/amy_fang/article/details/5894580

版权

html/css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

html:

css:

/* button start */ a.btn-warp,.btn-right,.btn-center{ padding:0; margin:0; background:url(./btn-sprite.gif) no-repeat; display:inline-block; height:21px; line-height:21px; text-decoration:none; } a.btn-warp{ padding-left:3px; background-position:left top; } .btn-right{ margin:0; padding-right:3px; background-position:right -21px; } .btn-center{ background-position:left -42px; background-repeat:repeat-x; border:0px solid red; } .btn-with-ico{ margin:0; height:21px; background:none repeat scroll 0 0 transparent; border:0; cursor:pointer; width:auto; _width:0px; padding:0px 5px 0px 18px; overflow:visible !ie; outline:0 none; } .btn-no-ico{ height:21px; line-height:21px; background:none repeat scroll 0 0 transparent; border:0; cursor:pointer; padding:0 -5px; outline:0 none; margin:0; } a.btn-warp:hover{background-position:left -63px; } a.btn-warp:hover .btn-right{background-position:right -84px; } a.btn-warp:hover .btn-center{background-position:left -105px;} .btn-ico-exec{background-image:url(./btn-ico-exec.gif); background-position:0 3px; background-repeat:no-repeat;} /* button end */

注意：
因为IE 在按钮的 value 值每增加 4 个字节（汉字为 2 个）时，就会在按钮的两边产生总共一个字节的内边距宽度，
所以button中的文字两边的空白会随着文字的增多而变宽。可以通过设置padding:0来解决，但必须给IE下的按钮元素设置 overflow 属性为 visible（注：padding 值仅在设置了overflow:visible 属性后才有效），
如果将按钮置于表格单元格中，虽然按钮显示正确了，但是原先预留的宽度大小却没有改变，仍然占据着空间，需要在 IE6 中设置按钮的宽度（width）为 0
{ padding: 0; width: auto; _width: 0; overflow:visible !ie;}