|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
每个声明内只能有一个属性,如果属性值中含有空格用双引号括起来例,在一个声明块内可以有多个声明,每个声明用分号隔开。
破洛洛文章简介:input标签默许款式的不同及其跨扫瞄器计划.
飞鱼的声纳顶部的搜刮框让我头疼了很长工夫,缘故原由是总不克不及取得跨扫瞄器的一致款式。次要的成绩有这么两个:一是input标签的高度不克不及一致,Firefox和IE中的高度一直不克不及分歧;二是在IE扫瞄器中属性为text的input标签中的输出笔墨不像尺度扫瞄器中的那样垂直居中显现,而是靠输出框的左上角显现。
为了完全办理搜刮框的这些成绩,我以GreenGaint主题搜刮框的款式为准,重写了一遍代码而且以像素为单元丈量了一下在没有任何款式表的情形下<input>标签在默许扫瞄器中的实践不同。
了局发明:input标签在type为text时,在Firefox和Safari中的默许高度为22像素(包含高低边框)宽度为146像素(包含摆布边框),而在IE中的默许高度为24像素,而宽度却和Firefox和Safari是分歧的,也是146像素。当input标签在type为submit时,在Firefox中的高度为23像素(包含暗影),宽度为75像素。在Safari中高度为21像素,宽度为73像素,在IE中高度为为25像素、宽度为73像素。
那末在款式化input标签时又该注重哪些成绩呢?先来看上面经由款式化后,在分歧扫瞄器中都有着优秀体现的搜刮框。
示例
总结一下,在给input标签写CSS时必要注重的有以下几点:
1、不要给属性为text的input标签设置高度,如许没法让IE扫瞄器下输出框中的笔墨垂直居中显现。只管你厥后想要经由过程设置padding属性来让笔墨居中,你会发明基本没法让它在Firefox和IE中获得分歧的效果。准确的做法是间接给input标签设置padding属性,经由过程内边距属性来调治input标签的高度,并且这时候IE中的笔墨也是居中显现的。
2、input标签不会承继父元素的字体款式和巨细,必要间接给input标签声明font-family和font-size属性。
3、给属性为text的input标签设置符合的width属性和padding属性,确保个中的笔墨在符合的局限内呈现。特别是利用了背景图片后,要让笔墨框的巨细和背景图片的巨细相称,如许看上往加倍美妙。
</p>
你的设计不仅仅用于web浏览器,也可以发布在其他设备上,比如PowerPoint。 |
|