submit btn的问题

  1. 使用的是旧的盒子模型,宽度包括padding和border
  2. 如果要设置左右的padding的话,ie6,7会表现比你设置的要宽,没有正确解析,添加overflow:visible就可以解决这个问题
  3. 只有ie支持line-height,火狐和谷歌都有一个你没有办法覆写的line-height,所以别对submit使用这个line-height了
  4. 在ie6,7下表单任意元素激活时,submit btn都会出现个黑色的边框,除非你设置border为none

为了说明问题,我们使用下面的这个demo

submit问题demo

第一个提交按钮测试line-height和padding,我们发现只有ie有line-height效果,且ie6,7的宽度比其他的都要宽;第二个测试width,宽度设置为160px,左右padding为20px,我们会看到实际宽度就是158px(包括border,奇怪不是160px),而不是我们想要的200px,你可以使用不同的浏览器访问这个地址,查看不同的效果,或者查看下面的效果对比图

submitbtn1

html code

<div id="demo1" class="demo">
<input type="submit" id="submit_demo1" value="提交" />
<input type="submit" id="submit_demo2" value="submit" />
</div>

css code

#submit_demo1{
	padding:0 20px;
	line-height:60px;
}
#submit_demo2{
	width:160px;
	padding:0 20px;
}

如何设置submit的高度,宽度,及文字垂直居中

对第一个设置border,第二个没有设置border,高度都设置为60px,我们会看到第一个包括红色的框高度为60px,第二个包括默认的框高度为58px,所以我的猜测是如果使用默认的border那么高度或宽度都会少两个像素(我也不知道为什么),还有就是如果设置了border我们会发现默认的渐变背景没有了;第二个问题是默认背景火狐解析的有点问题,偏上,然后文字也不是那么垂直居中对齐,还是有几个像素的差别,而其他浏览器是完美的垂直居中对齐,根本就不需要设置上下的padding和line-height,所以我们应该对火狐打bug,在这里我设置其padding-bottom为3px就可以了

html code

<div id="demo2" class="demo">
<input type="submit" id="submit_demo3" value="提交" />
<input type="submit" id="submit_demo4" value="submit" />
</div>

css code

#submit_demo3{
	width:100px;
	height:60px;
	border:1px solid #f00;
	font-size:12px;
}
#submit_demo4{
	padding:0 20px;
	overflow:visible;
	height:60px;
	font-size:12px;
	font-weight:bold;
}
@-moz-document url-prefix(){
	#submit_demo3{
		padding-bottom:3px;
	}
	#submit_demo4{
		padding-bottom:3px;
	}
}

到这里,大家应该对submit有所了解了,那么我们下面以搜索表单来具体运用下

搜索表单demo 1 非背景图片版

html code

<form action="#" method="post" id="search_form_1" class="demo">
<input type="text" placeholder="" id="search_text_1" class="form-text" /><span class="submit-wrap greybtn"><input type="submit" id="submit_btn_1" value="搜索" class="submit-btn" /></span>
</form>
<form action="#" method="post" id="search_form_3" class="demo">
<input type="text" placeholder="全站搜索" id="search_text_3" class="form-text" /><input type="submit" id="submit_btn_3" value="搜索" class="submit-btn greybtn" />
</form>

注:这里总共有两个demo,区别在于第一demo的submit是用span包裹起来的,第二个没有包裹,这是为了对比显示在ie6,7下黑色框。1、chrome浏览器默认input type为text和submit的margin为2px,但是如果你设置了高度那么上下的margin就没有了,如果设置宽度左右的margin 就没有了,很奇怪,亲自试试吧。2、这里的css代码因为比较少,而且很多都是我对form reset的设置,所以大家可以通过firebug查看了解下就可以了,不必贴出来了。3、第二个demo在ie6,7下的submit在表单获取焦点时是有个黑色的边框的,这个解决的方法很简单就是再给submit套一层标签span或者a都可以。当然如果你的submit这个按钮是用背景图片来做的,根本就不需要设置边框border那也就不需要嵌套一个额外的标签了

搜索表单demo 2 背景图片版

html code

<form action="#" method="post" id="search_form_2" class="demo">
<input type="text" placeholder="" id="search_text_2" /><input type="submit" value="搜索" id="submit_btn_2" class="submit-btn" />
</form>

css code

#search_form_2{
    background:url('images/search_bg.png') no-repeat -2px -2px;
	height:30px;
	width:549px;
}
#search_text_2{
	line-height:20px;
	height:20px;
	width:458px;
	border: 0 none;
	background:transparent;
	padding:5px;
	float:left;
}
#submit_btn_2{
	width:81px;
	height:30px;
	background:url('images/search_bg.png') no-repeat -471px -2px;
	border: 0 none;
	text-indent:-9999px;
	float:left;
}
/* 去掉虚框 */
#search_text_2:focus{
	outline:none;
}

注:这里因为我们主要是使用图片来实现效果,所以没有使用我们的form reset里面的一些样式,即没有加上form-text和submit-btn样式。在这里对于input为text类型我们必须要两个都设置,不然要么高度不够要不不垂直居中。这里背景图片法主要思路就是把背景text的背景设置在form元素上,不然设置在text元素上,如果输入内容超过了可见范围的宽度背景图片会跟着文字朝左移动,然后就是input为submit的替换为背景图片时有点变态,所以干脆用了float加text-indent为负来解决

小小赞助大大帮助

如果您觉得本文的内容对您的学习有所帮助:

支付鼓励

轻轻一点,是您对我的支持