一、button的使用
button标签是W3C HTML标准中按钮的标准代码,或许你还在使用Input的方法,但button标签拥有更灵活的使用方式和更丰富的表现形式,越来越受到广大设计师的亲睐(说的好假-_-)
但问题也出现在这个button标签在ie看来可不是那么亲切,ie6\7都存在一个问题——宽度,它无缘无故会比正常表现的按钮宽上不少,这样就破坏了设计师们精心设计的内容样式了。不过有问题,我们就能解决问题,而且用CSS能快速帮你解决。
button {
width:auto;
overflow:visible;
}
这样子设置按钮的属性就能解决宽度问题,但我们还需要在为“怪异模式quirk mode”下的IE考虑
<!–[if IE]>
<style>button{width:1;}</style>
<!– [endif]–>
这样就能完美修复(quirk mode 下并没有做尝试 懒了 -_-)
在实际使用button的过程中,又发现了IE对高度及行高解释有所不同,并且IE 6 /7与8也有大约2px、3px的差距(没有自己看),如果对该元素实现以下的背景图效果就会发现这个问题(下图是FF的效果)
而这是IE6/7
解决的方案很简单
在元素css中如下设置:
height:15px;
vertical-align:middle;
line-height:15px;
也就是将行高和高度设置为相同的值(这里我是根据图片的高度),再将其水平居中
这个方法也可以应用在其他问题中,能够实现元素的水平居中(例如实现元素在block元素中的水平居中)
不知道为什么,ie下的字体大小感觉和ff下不同,而且设置的margin-left也不同,暂时没有理会,看来对button的差异还没有完全了解
二、简单实现段落文字的左右对齐
.content {
text-justify:inter-ideograph;
text-align:justify;
}
其实文字对齐这个问题要完美解决还是很复杂的,但这两个css设置已经能满足我对段落对其的要求了,以后要再深入了解一下其他的方法
三、Word-spacing的用途
可能很多人都遇到过想让表格、表单中的中文三字和四字进行对齐,而在HTML中使用 似乎并不好看,严重破坏美感,这里我给出一个简单的方法来让三字和四字完美对齐
首先在html中让三字的文字都手动空一格
比如:用_户_名 (下划线代表空格)
然后针对这些元素设置css属性:word-spacing:2px;
恩,在标准浏览器下已经完美了,但ie可不这么看
于是在ie条件语句下,再给样式设置word-spacing:0px;
这样就简单的解决三字和四字对齐问题
当然如果遇到两个字、三个字、四个字都有的情况,这就不可能这么用了,暂时留给大家想想简单有效的办法吧!
本文地址:总结几个CSS小技巧
转载请注明:夜阑小雨 » 总结几个CSS小技巧