文档章节

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

hosser
 hosser
发布于 2015/01/26 10:56
字数 549
阅读 12
收藏 0

前端开发之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)查看评论


本文转载自:http://blog.lmlphp.com/archives/20

hosser

hosser

粉丝 192
博文 78
码字总数 4614
作品 3
徐汇
私信 提问
「前端那些事儿」③ CSS 布局方案

我们在日常开发中经常遇到布局问题,下面罗列几种常用的css布局方案 话不多说,上代码! 居中布局 以下居中布局均以不定宽为前提,定宽情况包含其中 1、水平居中 a) inline-block + text-ali...

zwwill木羽
2018/10/30
0
0
:before和::before的区别

在一次项目中,有一次要用到::selection伪元素,然后开发同学问我,CSS中一个冒号和两个冒号有神马区别? 这好像真的是个问题,或许很多前端同学对此都有疑惑,查了些资料,证实了下两个符号...

华宰
2011/01/27
112
0
基于Metronic的Bootstrap开发框架经验总结(15)-- 更新使用Metronic 4.75版本

在基于Metronic的Bootstrap开发框架中,一直都希望整合较新、较好的前端技术,结合MVC的后端技术进行项目的开发,随着时间的推移,目前Metronic也更新到了4.75版本,因此着手对这个版本的内容...

walb呀
2017/12/04
0
0
谈谈css的加载及加载循序

谈谈css的加载及加载循序 Haorooms博客-前端博客-前端技术,记录web前端开发的技术博客2017-12-231 阅读 css 前言 关于前端css性能优化,网上很多类似文章,我之前也写过,《[网站前端性能优...

Haorooms博客-前端博客-前端技术,记录web前端开发的技术博客
2017/12/23
0
0
移动开发之css3实现背景几种渐变效果

移动端背景渐变,非常的年轻,符合90后年轻一代的审美,css3的这个渐变目前主要是应用在手机前端领域。 产品设计中使用渐变色的好处: 1:观众不至于眼睛过于疲劳(如果是浅色背景,3个小时下...

祈澈姑娘
2018/01/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

XXL-JOB使用命令行的方式启动python时,日志过多导致阻塞的解决方式

一、Runtime.getRuntime().exec()的阻塞问题 这个问题也不能算是XXL-JOB的问题,而是Java的Runtime.getRuntime().exec()造成的,BufferedReader的缓冲区大小有限,当不能及时从缓冲区中把输出...

codeobj
7分钟前
1
0
java后端获取字符串标签里面的具体值

1、如下:怎么获取value值,使用Jsoup解决 <select id='department' name='department' class='select' tabindex='6' onchange='changeDept()'><option value=''>院系</optio......

木九天
14分钟前
2
0
Xamarin图表开发基础教程(10)OxyPlot框架支持的图表类型

Xamarin图表开发基础教程(10)OxyPlot框架支持的图表类型 OxyPlot组件支持26种图表,这些图表按照功能和样式可以分为4大类,分别为线型图表、条型图表、金融图表和其它图表。 线型图表 OxyP...

大学霸
17分钟前
2
0
移动端input“输入框”常见问题及解决方法

移动端input“输入框”常见问题及解决方法 1. ios中,输入框获得焦点时,页面输入框被遮盖,定位的元素位置错乱: 当页input存在于吸顶或者吸底元素中时,用户点击输入框,输入法弹出后,fie...

tyou
19分钟前
2
0
初探Android线程池

前言 最近在看OkHttp的源码,看的时候发现有关线程池的运用,自己就仔细想了一下,这个块知识好像不是很牢固。没办法,再研究一下有关线程池的相关知识吧。学习就是一个查漏补缺的过程,最终...

二营长的意大利炮手
26分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部