欢迎访问 夜阑小雨 我的学习碎片档案,这里记录了我的学习内容和工作中经验,希望给您带去帮助。

总结几个CSS小技巧

Web前端 夜阑小雨 949℃ 0评论

一、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的效果)

sdad

而这是IE6/7

asd

解决的方案很简单

在元素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中使用&nbsp;似乎并不好看,严重破坏美感,这里我给出一个简单的方法来让三字和四字完美对齐

首先在html中让三字的文字都手动空一格

比如:用_户_名 (下划线代表空格)

然后针对这些元素设置css属性:word-spacing:2px;

恩,在标准浏览器下已经完美了,但ie可不这么看

于是在ie条件语句下,再给样式设置word-spacing:0px;

这样就简单的解决三字和四字对齐问题

当然如果遇到两个字、三个字、四个字都有的情况,这就不可能这么用了,暂时留给大家想想简单有效的办法吧!

本文地址:总结几个CSS小技巧

转载请注明:夜阑小雨 » 总结几个CSS小技巧

喜欢 (0)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址