【转载】前端开发之CSS兼容写法经验总结

前端开发之CSS兼容写法经验总结技术

maybe yes 发表于2014-11-23 22:47

原文链接 : http://blog.lmlphp.com/archives/20  来自 : LMLPHP后院

技术真的需要总结，人往往是在总结的过程中成长进步的。本人之前也做过很多项目，但是由于种种原因，没有养成总结的习惯，以至于很多东西懂了又忘记，忘记了又知道了。最近的一段时间，我在写LMLPHP框架同时完成官网和博客等其他项目的开发，才发现总结的重要性。下面将例举一些CSS书写需要注意的一些问题，这些问题都是本人在做浏览器兼容的时候发现的，非常重要。对于前端工程师们来说，也许值得一看，欢迎有志之士留言交流。

前端CSS之图片边框

一个人只有从头至尾完成整个WEB项目时，且在不使用外界UI框架时，一定会知道，我们在定义全局样式的时候一定要定义图片的边框属性。这点也是我在做浏览器兼容的时候，发现IE8会默认有蓝色边框。定义图片边框属性，如下代码示例：

<style>
img{
	border:0;
}
</style>

前端CSS之DIV高度

在IE的老版本浏览器中，当我们需要设置DIV的高度很小时发现不生效，原因是IE6/IE7/IE8认为DIV会默认继承字体的高度。所以当我们需要设置DIV高度并兼容所有浏览器时，必须要设置字体大小为0(推荐)，或者设置overflow属性为hidden。如下代码示例：

<style>
.divheight{
	height:5px;
	font-size:0;
	overflow:hidden;
}
</style>

前端CSS之display:inline-block;

CSS的display:inline-block;属性在某些浏览器中支持的不好，比如IE的一些老版本。若要达到inline-block的效果并兼容所有浏览器，最好加上float属性，根据实际情况向左或者向右浮动。如下代码示例：

<style>
.inline{
	display:inline-block;
	float:left;
}
</style>

阅(26)评(0)查看评论