input按钮加背景,IE7或者IE6会出现黑框
2013-01-29 15:25
197 查看
现在做Web UI的都希望自己表单的input按钮多么多么美观,于是使用各种按钮背景
背景可以采用简单的渐变或者高光背景然后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>
参考:http://wangye.org/blog/archives/302/
背景可以采用简单的渐变或者高光背景然后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>
参考:http://wangye.org/blog/archives/302/
相关文章推荐
- input 按钮背景,在IE6 IE7中不显示
- input 按钮背景在IE6 IE7中不显示的解决方法
- input,button制作按钮IE6,IE7点击时1px黑边框的解决方法
- [html] <a> and <input> can not click in IE6 when use png fixed -- IE6下png图片和png背景透明导致该区域的链接和按钮无效
- iphone中input按钮设置disabled属性出现灰色背景没有显示问题
- 关于IE6无法升级为IE7或者IE8的问题
- 类型为image的input标签,鼠标点击切换按钮背景图片
- 遭遇input与button按钮背景图失效不显示的解决办法
- 【小程序】input标签添加背景图,会出现两个背景图
- div+css 如何让背景层半透明 内容不透明 并且能兼容ie6,ie7,ie8,ff
- CSS3实现的渐变按钮,在IE7、IE6下的滤镜使用。
- Form表单提交按钮图片IE6下背景透明(js提交)
- input背景在ie7上不显示
- js通过按钮直接把input或者textarea里的值复制到粘贴板里
- input 提交表单按钮 背景图片的完美设置
- 隐藏input边框(ie6、ie7)
- 老生常谈IE兼容性:ie6 javascript:void(0)、IE7 input透明、IE8 jquery动态加载css
- 注意:按钮响应事件不要用button,要用input!否则容易报错:ClientAbortException或者alert秒关!
- input与button按钮背景图失效不显示的解决办法
- 让背景层半透明 内容不透明 并且能兼容ie6,ie7,ie8,ff