|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
结构清晰,容易被搜索引擎搜索到,天生优化了seo
破洛洛文章简介:表单button的text-indent成绩。
HTML
<inputtype="submit"value="Submit"id="btn"/>
HTML
<inputtype="submit"value="Submit"id="btn"/>
CSSCode
在这个实例中,经由过程图片背景来制造Button,接纳了图片替换笔墨最经常使用的一种办法“text-indent”来制造
#btn{
width:114px;
height:37px;
border:none;
background:transparenturl(images/submit_btn.gif)no-repeatcenter;
overflow:hidden;
text-indent:-999px;
}
下面代码,在古代扫瞄器中不会有任何成绩,但是在IE下“text-indent:-999px”是不起感化的,请看最终效果:
怎样办理
为了让各扫瞄器下能一般化显现,我一样平常碰着如许的成绩都是在下面的代码基本上加上“font-size和line-height之类的设置”:
#btn{
width:114px;
height:37px;
border:none;
background:transparenturl(images/submit_btn.gif)no-repeatcenter;
overflow:hidden;
text-indent:-999px;
font-size:0;
line-height:0;
display:block;
}
如许一来就可以到达各扫瞄器下一样的效果了。最初我们在来看看他是怎样事情的。大概说为何要加上这几行代码?
font-size:0加上font-size:0后,能够办理IE7下显现笔墨的成绩(换句话来讲,经由过程设置font-size即是0后,button在IE7扫瞄器中不会显现文本出来,到达想要的效果),可是在IE6下会有分明的一条直线,并且线条色和远景色不异。
line-height:0第一条中说过了,font-size只要办理IE7下的成绩,留下了一条直线在IE6中显现,要办理这个成绩也复杂,我们能够经由过程line-height设置为0来办理。
display:block将button按块元素显现
这就是为什么要如许设置的缘故原由了。偶然候在如许设置了今后还会给你的button留下一个小点点,我通常为经由过程color来设置:
#btn{
width:114px;
height:37px;
border:none;
background:transparenturl(images/submit_btn.gif)no-repeatcenter;
overflow:hidden;
text-indent:-999px;
font-size:0;
line-height:0;
display:block;
color:#fff;
text-align:right;
}
这有一个小技能必要出格注重:这里的color色选择其背景邻近的色,让人肉眼看不出来,我通常为将其文本安排右边或右侧,然后择其最邻近的色彩做为背景致。好比这个实例,我们选了红色。
</p>
表现和结构分离,在团队开发中更容易分工合作而减少相互关联性 |
|