我是FE,也是Fe

前端来源于不断的点滴积累。我一直在努力。

统计

留言簿(15)

阅读排行榜

评论排行榜

浏览器兼容的圆角+小图标按钮实现过程

不可以小看一个小小的按钮。当你写一个简单的button时
<input type="button" id="" name="" value="宽度是多少" />
在各个浏览器上去看看宽度和高度。
IE8 下是97px*27px;
Firefox 3 是71px*18px;
Chrome 7是81px*22px;

已知的需求是按钮要求有圆角和背景图片。通常背景图片和圆角会跟皮肤一起设置。还需要有按钮小图标。

要做出圆角需要两张小图片,一张也行。下面是本例用到的图片

 btn_left.gif 180px*22px;
 btn_right.gif 3px*22px;
 page_white_edit.png 16*16小图标。

浏览器的兼容工作大多放在按钮的大小上。下面是css:
        .iButton{
            font-size
:12px;
            font-family
:"\5fae\8f6f\96c5\9ed1","Times New Roman",Tahoma,Helvetica, Arial,sans-serif; 
            background
:transparent url(btn_left.gif) no-repeat 0px 0px;/*左边背景图片*/
            color
:#000;
            text-decoration
:none;
            display
: block;
            float
: left;
            height
:22px;/*display:block;float:left; height:22px;保证在各种浏览器上有一致的高度*/
            margin
:0px 3px; 
        
}
        .iButton span
{
            background
:transparent url(btn_right.gif) no-repeat right top; /*右边背景图片*/
            padding
:0px 8px; /*不写button时padding*/
            display
: block; 
            line-height
:22px;/*保证高度是22px;*/
        
}
        .iButton input
{
            background-color
:transparent;
            background-position
: left center; 
            background-repeat
:no-repeat;
            text-indent
:16px;
            text-indent
:0px\9; /*非IE浏览器文本缩进16px;*/
            margin
:0px; 
            margin
:0px -18px 0px -6px\9; /*保证按钮的宽度一致*/
            padding
:0px; 
            border-width
:0px; 
            height
:22px;/*保证高度是22px;*/
        
}


使用的HTML
<class="iButton" href="###"><span><input type="button" id="" name="" value="有小图标按钮" style="background-image:url(page_white_edit.png)" /></span></a>


<class="iButton" href="###"><span>无小图标按钮</span></a>


代码下载

参考资料
How to make sexy buttons with CSS

Top 10 CSS buttons tutorial list

posted on 2010-11-15 23:12 衡锋 阅读(2304) 评论(2)  编辑  收藏 所属分类: Web开发

评论

# re: 浏览器兼容的圆角+小图标按钮实现过程 2010-11-16 16:26 硫化黑

图片是两个好呢,还是一个好,对浏览器兼容来说  回复  更多评论   

# re: 浏览器兼容的圆角+小图标按钮实现过程 2010-11-16 20:47 阳衡锋

@硫化黑
一张与两张与浏览器兼容没有什么区别。一张图片只是背景平铺两次而已。  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航: