a>span+背景图片按钮如何自适应宽度?
a>span+背景图片按钮如何自适应宽度?
在ie6下不设定宽度,按钮会等于100%宽,有什么办法?必须要设定宽度吗?
demo地址:http://linjuming.lzrcz.com/question/btn_center/btn.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>page title</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head><body> <style type="text/css"> *{margin:0;padding:0} .box{margin:50px;background-color:tan;text-align:center;padding:20px;} .btn { display:inline-block; padding-left: 15px; background-position: left top; text-align: center; background-repeat: no-repeat; color: #FFFFFF; font-size: 20px; font-weight: bold; cursor: pointer; word-spacing: 0; background-image:url(btn_left.png); height:52px; line-height:52px; } .btn span { padding-right: 15px; display: block; height: 100%; background-position: right top; background-repeat: no-repeat; width: auto; cursor: pointer; background-image:url(btn_right.png); } .w150{width:150px;} </style> <div class="box"> <a href="#" class="btn w150"><span>hello world</span></a> </div> <div class="box"> <a href="#" class="btn"><span>hello world</span></a> </div></body></html>