前端开发之CSS兼容写法经验总结技术
技术真的需要总结,人往往是在总结的过程中成长进步的。本人之前也做过很多项目,但是由于种种原因,没有养成总结的习惯,以至于很多东西懂了又忘记,忘记了又知道了。最近的一段时间,我在写LMLPHP框架同时完成官网和博客等其他项目的开发,才发现总结的重要性。下面将例举一些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>
相关文章
暂无