DNF每日簽到送豪
lol7月神秘商店
LOL黑市亂斗怎么
LOL英雄成就標(biāo)志相關(guān)資訊
- WinPE系統(tǒng)啟動(dòng)過(guò)程 各種方式的
- Visual Basic中輕松打造絢麗按鈕
- JAVA中的main函數(shù)詳細(xì)講解
- 用pushlets實(shí)現(xiàn)java comet，長(zhǎng)連接
- PHP突出開(kāi)源優(yōu)勢(shì)要做Windows平臺(tái)一
- Win2000+Apache+MySql+PHP4+PERL安
- PHP4在WinXP下IIS和Apache2服務(wù)器上
- WCF學(xué)習(xí)：Instance context model(
- AutoCAD 圖導(dǎo)入Photoshop 的方法
- AutoCAD如何計(jì)算二維圖形的面積
本類(lèi)常用軟件
-
福建農(nóng)村信用社手機(jī)銀行客戶(hù)端下載下載量：584204
-
Windows優(yōu)化大師下載量：416913
-
90美女秀(視頻聊天軟件)下載量：366961
-
廣西農(nóng)村信用社手機(jī)銀行客戶(hù)端下載下載量：365699
-
快播手機(jī)版下載量：325855
input按鈕加背景IE7 IE6去黑框的方法
2013/1/29 20:05:58 出處：本站原創(chuàng) 人氣：1591次 字號(hào)：小 中 大
騎自行車(chē)的正確
在校大學(xué)生該如
微信朋友圈怎么每日一囧
現(xiàn)在做Web UI的都希望自己表單的input按鈕多么多么美觀，于是使用各種按鈕背景
背景可以采用簡(jiǎn)單的漸變或者高光背景然后repeat-x，邊框直接設(shè)置border就可以了，似乎這種想法沒(méi)有問(wèn)題
IE9，IE8下沒(méi)發(fā)現(xiàn)什么問(wèn)題，IE7或者IE6會(huì)出現(xiàn)黑框
<!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會(huì)出現(xiàn)黑框</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、如果設(shè)置border:none，也就是說(shuō)不要border，那么這種黑框就沒(méi)有了，所以有種解決辦法是直接把框?qū)懰赖奖尘吧�，然后去除border，即設(shè)置border:none。這個(gè)按鈕樣式的背景羅列。這種辦法的缺點(diǎn)想必大家都清楚，就是靈活性差了點(diǎn)，有多少size的按鈕就要準(zhǔn)備多少size的背景
2、input按鈕去除框線(xiàn)（border:none），然后input外面套上label，border寫(xiě)到label上，由于input被去除了border，所以不會(huì)出現(xiàn)黑框，同時(shí)外面的label有border，所以用戶(hù)可以看到正常的框線(xiàn)，當(dāng)然由于label的特性，你點(diǎn)擊label的時(shí)候也等于點(diǎn)擊了input按鈕，哦，對(duì)了，為了模擬得更好一點(diǎn)，你可以設(shè)置他們的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會(huì)出現(xiàn)黑框</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>
背景可以采用簡(jiǎn)單的漸變或者高光背景然后repeat-x，邊框直接設(shè)置border就可以了，似乎這種想法沒(méi)有問(wèn)題
IE9，IE8下沒(méi)發(fā)現(xiàn)什么問(wèn)題，IE7或者IE6會(huì)出現(xiàn)黑框
<!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會(huì)出現(xiàn)黑框</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、如果設(shè)置border:none，也就是說(shuō)不要border，那么這種黑框就沒(méi)有了，所以有種解決辦法是直接把框?qū)懰赖奖尘吧�，然后去除border，即設(shè)置border:none。這個(gè)按鈕樣式的背景羅列。這種辦法的缺點(diǎn)想必大家都清楚，就是靈活性差了點(diǎn)，有多少size的按鈕就要準(zhǔn)備多少size的背景
2、input按鈕去除框線(xiàn)（border:none），然后input外面套上label，border寫(xiě)到label上，由于input被去除了border，所以不會(huì)出現(xiàn)黑框，同時(shí)外面的label有border，所以用戶(hù)可以看到正常的框線(xiàn)，當(dāng)然由于label的特性，你點(diǎn)擊label的時(shí)候也等于點(diǎn)擊了input按鈕，哦，對(duì)了，為了模擬得更好一點(diǎn)，你可以設(shè)置他們的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會(huì)出現(xiàn)黑框</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>
熱門(mén)評(píng)論
最新評(píng)論