2012年7月14日

css 兼容性书写记录

摘要: 从页面开始布局设计初就考虑到各个浏览器的问题,留出充足的余量和给各个浏览器留出充足的发挥空间,这样的页面兼容性才是最好的。 下面就来几个问题: 1、div border不能显示 问题描述:用一个div A层中间放了几个div B来存放内容,因为内容是不固定的,于是就使用了对B层使用了float,让A层自适应高度,后面对A层加上边框,在ie中能显示,但是在firefox中就始终没法显示。 问题分析:B层使用了float,位置浮起,A层边框不能显示 解决方案:对A开始使用一个浮动清除<div style="clear:both"></div> 2、cms 阅读全文

posted @ 2012-07-14 06:59 爱上某人 阅读(99) 评论(0) 推荐(0) 编辑

CSS中不为人知Zoom属性的使用介绍(IE私有属性)

摘要: 其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。除此之外,它还有其他一些小作用,比如触发ie的hasLayout属性,清除浮动、清除margin的重叠等。Zoom的使用方法:zoom : normal | numbernormal : 默认值。使用对象的实际尺寸number : 百分数 | 无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的 normal 值用白话讲解就是zoom:后面的数字即放大的倍数,可以是数值,也可以是百分比。如:zoom:1,zoom:120%。而这个属性只要在IE中才起作用,所以很少用到它的实.. 阅读全文

posted @ 2012-07-14 06:56 爱上某人 阅读(148) 评论(0) 推荐(0) 编辑

编写出色CSS代码的13个建议小结

摘要: 1. 使用Reset但并非全局Reset 不同浏览器元素的默认属性有所不同,使用Reset可重置浏览器元素的一些默认属性,以达到浏览器的兼容。但需要注意的是,请不要使用全局Reset: 复制代码代码如下:*{ margin:0; padding:0; } 这不仅仅因为它是缓慢和低效率的方法,而且还会导致一些不必要的元素也重置了外边距和内边距。 在此建议参考YUI Reset和Eric Meyer的做法。我跟Eric Meyer的观点相同,Reset并不是一成不变的,具体还需要根据项目的不同需求做适当的修改,以达到浏览器的兼容和操作上的便利性。我使用的Reset如下:复制代码代码如下:/** 清 阅读全文

posted @ 2012-07-14 06:54 爱上某人 阅读(126) 评论(0) 推荐(0) 编辑

也谈谈罪恶的Haslayout haslayout解决之道

摘要: 什么是Haslayout? 顾名思义,它的意思就是 --- has layout,是IE下的特有属性,通过 IE Developer Toolbar 可以查看 IE 下 HTML元素是否拥有haslayout,在 IE Developer Toolbar 下,拥有 haslayout的元素,通常显示为“haslayout = -1”。 hasLayout是一种只读属性,有两种状态 true/false,当其为true时,代表该元素有自己的布局,否则代表该元素的布局继承于父元素。 什么时候表明Haslayout = false? IE浏览器下的很多bug都是haslayout =... 阅读全文

posted @ 2012-07-14 06:51 爱上某人 阅读(95) 评论(0) 推荐(0) 编辑

CSS图片垂直居中实现方法详解

摘要: 点评:CSS图片垂直居中问题,困扰了我许久,今天终于可以总结下来了-方法一:利用定位 HTML结构如: 复制代码代码如下:<div class="box"> <a class="pic-wrap" href="#" target="_blank"> <img src="http://img01.taobaocdn.com/tps/i1/T1LeeNXodaXXXXXXXX-130-150.png"> </a> </div> CSS代码如 阅读全文

posted @ 2012-07-14 06:49 爱上某人 阅读(181) 评论(0) 推荐(0) 编辑

IE6的inline-block

摘要: 1、display:inline-block让一个元素具有“区块元素”的属性(可以设置width和height),又具有“内联元素”的属性(不产生换行)。2、IE中的inline-blockIE6不支持这个属性,但IE8开始支持这个属性。让IE6内联元素具备inline-block特性由于inline-block会触发IE的layout,所以IE6中只要设置{display:inline-block;}即可。让IE6区块元素具备inline-block属性,有两种方法A、可以先触发layout,再设置为inline,需要注意的是这两个display必须在两个CSS声明中才有效,代码如下:复制代 阅读全文

posted @ 2012-07-14 06:46 爱上某人 阅读(145) 评论(0) 推荐(0) 编辑

牛人也得看的15个CSS技巧(提高网页效率)

摘要: 而使用DIV+CSS的布局方法,将所有页面,或所有区域统一用CSS文件控制,就避免了不同区域或不同页面体现出的效果偏差。下面为大家介绍几点注意事项,希望能有所帮助:1、不要使用过小的图片做背景平铺。 这就是为何很多人都不用 1px 的原因,这才知晓。宽高 1px 的图片平铺出一个宽高 200px 的区域,需要 200*200=40, 000 次,占用资源。 2、无边框。 推荐的写法是 border:none;,哈哈,我一直在用这个。 border:0; 只是定义边框宽度为零,但边框样式、颜色还是会被浏览器解析,占用资源。 3、慎用 * 通配符。 所谓通配符,就是将 CSS 中的所有标签均初始化 阅读全文

posted @ 2012-07-14 06:43 爱上某人 阅读(117) 评论(0) 推荐(0) 编辑

提高CSS网页渲染效率的11点注意事项

摘要: 1、十六进制的颜色值对位数与大小写编写十六进制颜色值时你可能会用小写字母或省略成3位数,关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响,但十六进制的颜色值默认标准是大写及6位数标注。在未知情况下不希望冒险而降低了渲染的效率。* 不赞成 - color:#f3a;* 建议用 - color:#FF33AA;2、display与visibility的差异他们用于设置或检索是否显示对象。display隐藏对象不保留物理空间,visibility为隐藏对象保留占据的物理空间。当浏览器渲染被占据的物理空间时,会有所消耗资源。* 不赞成 - visibility:hidden;* 建议用 - 阅读全文

posted @ 2012-07-14 00:07 爱上某人 阅读(130) 评论(0) 推荐(0) 编辑

导航