LMLPHP后院

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

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

技术真的需要总结,人往往是在总结的过程中成长进步的。本人之前也做过很多项目,但是由于种种原因,没有养成总结的习惯,以至于很多东西懂了又忘记,忘记了又知道了。最近的一段时间,我在写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>

相关文章
2024-04-24 10:51:14 1713927074 0.033466