背景可以采用簡單的漸變或者高光背景然后repeat-x，邊框直接設置border就可以了，似乎這種想法沒有問題
IE9，IE8下沒發現什么問題，IE7或者IE6會出現黑框
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>input按鈕加背景，IE7或者IE6會出現黑框</title>
<style type="text/css">
<!--
.hk {
height:22px;
border:#999 1px solid;
background:#E5E5E5 url(pn.png) repeat-x 0 0;
cursor:pointer;
}
-->
</style>
</head>
<body>
<input type="submit" name="Submit" value="登陸" class="hk" style="width:70px;" />
</body>
</html>
解決方法：
1、如果設置border:none，也就是說不要border，那么這種黑框就沒有了，所以有種解決辦法是直接把框寫死到背景上，然后去除border，即設置border:none。這個按鈕樣式的背景羅列。這種辦法的缺點想必大家都清楚，就是靈活性差了點，有多少size的按鈕就要準備多少size的背景
2、input按鈕去除框線（border:none），然后input外面套上label，border寫到label上，由于input被去除了border，所以不會出現黑框，同時外面的label有border，所以用戶可以看到正常的框線，當然由于label的特性，你點擊label的時候也等于點擊了input按鈕，哦，對了，為了模擬得更好一點，你可以設置他們的cursor為pointer
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>input按鈕加背景，解決IE7或者IE6會出現黑框</title>
<style type="text/css">
<!--
.pn {
height:22px;
border:none;
background:#E5E5E5 url(pn.png) repeat-x 0 0;
cursor:pointer;
}
.l_pn {
display:block;
border:#999 1px solid;
}
-->
</style>
</head>
<body>
<label class="l_pn" style="width:70px;">
<input type="submit" name="Submit" value="登陸" class="pn" style="width:70px;" />
</label>
</body>
</html>
更多信息請查看IT技術專欄
版權所有:易賢網
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試