看到淘宝网页中这样写使用的是import，而很多网站都是使用link，当然还有一些页面比较简单，流量很大的网站，是直接将CSS写在html代码中的？他们有什么区别？css用import还是link好？从经典论坛和另外一个网站大概了解了一下。
当然使用链接link和导入import的好处就是易于维护，但当网速比较慢的时候，会出现加载中断的情况，导致页面排版错误。 Read more»
Posts Tagged ‘CSS’
Import和Link的差别
Tuesday, October 7th, 2008FF与IE在CSS中的差异
Monday, September 8th, 20081 针对firefox ie6 ie7的css样式
现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。
现在写一个CSS可以这样：
#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。 Read more»
CSS Hack之!important
Saturday, August 23rd, 2008最近在做一个网页，菜单栏在IE和其他(Mozilla、Opera等)中总是有些偏差。这是因为IE对盒之间距离的解释的bug造成的，其实用!important可以解决。
不过网上对!important的用法很多都只是说是IE不识别，很容易让初学者误解。IE并非不识别带!important的属性，只是不识别!important的优先级。举个例子： Read more»
各浏览器常用CSS Hack整理
Friday, August 22nd, 2008CSS Hack是在标准CSS没办法兼容各浏览器显示效果时才会用上的补救方法，在各浏览器厂商解析CSS没有达成一致前，我们只能用这样的方法来完成这样的任务。
我进行前端开发的时候,测试用的浏览器大致有： IE7, IE6, Opera9(文章撰写时版本为9.25 8825)， Safari3(文章撰写时版本为3.0.4 523.15)， Firefox2(文章撰写时版本为2.0.0.11)。
在正常的 selector { property:value; } 的基础上常会根据具体情况为相同元素使用Hack以达到浏览器间统一。 Read more»
IE与Firefox对width的不同解释及解决办法
Tuesday, August 19th, 2008图片中：CSS ‘width’ 指的是标准CSS中所指的width的宽度，在firefox，opera等中的宽度就是这个宽度。它只包含容器中内容的宽度。
而Internet Explorer ‘width’则是指整个容器的宽度，包括内容，padding ，border。
所谓的CSS的宽度的加法减法就指这里不同浏览器对width解析得到的不同结果。
Firefox中是加法：容器占的宽度=内容宽度+padding宽度+border宽度
IE中是减法：内容宽度=您定义的容器宽度(Internet Explorer ‘width’)-padding宽度-border宽度
大家区分的时候重点是分清：内容宽度和容器所占宽度这两个的不同
由于以上差别的存在，必然造成定义的一个容器宽度在不同浏览器中显示出不同的效果来。解决办法主要有两种：
一种是写hack
一种是采取在当前容器中再增加一个div的方法来解决。
写hack：
给不同的浏览器写一个不同的width： div.aa{width:100px; *width:120px;}Firefox等浏览器只能认出前一个width来，因此它会认为这个div容器的宽度是100px，而IE6等浏览器则两个都能认出来，但是根据优先级，写在后面的会被采纳，因此IE6会认为这个div容器的宽度是120px；
增加一个div或者其它容器的方法：
div结构是：
<div class=”aa”><div>内容放在这里</div></div>
CSS代码是：
.aa{width:120px;}
.aa div{padding:10px;}
将padding border与width分开来写，分到不同的div里面，既不用做加法，也不用做减法，外面的div直接采用我们给它指定的宽度。
