这里，凯尔抛砖引玉啦~~进入正题——

盒模型问题，避免将”padding/border”和”width”同时应用到同一元素

盒模型的问题，也是最常见的。07年年初我写过一篇文章，讲到过盒模型问题的解决方法。
这个问题的产生，要“归功”于IE5对于盒模型的错误解析，让IE系列将这个BUG延续了很久，IE7后来才解决这个问题。

避免使用不被少数浏览器支持的样式

1. “overflow-x” 和 “overflow-y”，支持的浏览器：IE6，IE7，Firefox，Safari；不支持的浏览器：Opera（包括最新的Opera 9.24），在Opera中是完全无视的。

2. “min-width”，别指望它在IE中会起作用，我们只有回避它，采用其他的方法实现该效果。

避免使用私有样式

你也许要说，为什么在Firefox中我的头像没有滤镜效果了？要注意，filter滤镜，自定义滚动条，或者自定义鼠标，都是IE的私有样式，而在其他浏览器中都不会发挥任何作用。这些IE专有的CSS扩展样式在正式标准中并不存在。

规范地书写代码

按照规范的顺序来定义某些属性中的各个值无疑是一种好的习惯，这样会减少我们出错的机会，比如：

1. 图片的对齐 background-position，Firefox严格按照X坐标和Y坐标来解析，”background-position:top 2px;”在Firefox中就会解析错误（IE中正常）。虽然”background-position:top left;”（这里明确指出是Y坐标和X坐标）在Firefox中正常解析，但书写为”background-position:left top;”是好的习惯。

2. 而在margin，padding的属性中，必须按照顺序书写。

字体大小的设定

1. 字体大小尽量不要使用小数，因为不同的浏览器解释不一样，比如 “font-size:11.5px;” ，IE7认为是12px，Opera则认为是11px。
2. 注意字体大小的极限。目前网页中主要使用的Windows宋体，在11像素或者更小的尺寸下，就会出现辨认的困难，即使浏览器使用Cleartype，表现也不好。
11px的宋体字，在IE7中，会显示为12px；但是在FF中，仍然为11px，影响辨认。
也就是说，宋体不要小于12px，这几乎是它的极限，至少要保证网页主题部分字体不小于12px。顺带说一句，对比宋体，微软雅黑使用更小的字号仍然可以非常优秀地显示，但是它没有完全普及。

3. 在你的CSS代码中务必要定义字体的大小，因为不同的浏览器，不同的用户，默认的字体大小可能是不同的，所以你需要明确定义。

说了这么多，而最有效的方法就是在不同的浏览器上细心地调试了，代码写好了，首先在最新的浏览器上调试，而不是原来的版本。
常见的浏览器，都还是要装到电脑上的，如IE7，IE6，Firefox，Safari，Opera。建议安装IE7，然后下载绿色版的IE6。

上面的内容，并不能达到全面和完备，只是自己遇到过的一些问题。今后会继续更新。

———————————–

PS：做个标题的图片，找了快一中午的素材，不容易呀……
似乎太花了点，图片把标题的注意力抢走了 -。-

其实，只要修改下CSS，添加简单的一句话，就可以解决这个问题：

打开PJBlog皮肤中名为typography.css的样式表，加入（并且添加必要的其他属性）：

程序代码
.LinkTable{ overflow: auto;  width: a px;  height: b px;}

或者修改原有的LinkTable类的定义。最后效果如图：

这里，
a 应该足够大，使得友情链接中的条目不会在水平方向上溢出（让水平方向不会出现滚动条）；
b 为你想要的友情链接栏的高度（让垂直防线出现滚动条）。

有人要问，为什么不使用 “overflow: scroll” 呢？
这样的话，就会同时出现垂直和水平方向上的滚动条，影响美观，也没有必要：

那么，我们为什么不使用 “overflow-x” 和 “overflow-y” 呢？
其实，

程序代码
.LinkTable{ overflow-x: hidden;  overflow-y: scroll; }

不失为一个好的办法，它符合最初我们的想法。

但是我们知道， “overflow-x” 和 “overflow-y” 曾经是IE的专有属性，不能被其他浏览器支持。
而在今天，许多其他的浏览器也开始支持这些属性了，比如Firefox，Safari；而最新版的Opera 9.24仍然不支持这两个属性，造成页面错乱。（2007年10月25日测试）
所以，为了支持性，在有其他实现方法的时候，最好不使用 “overflow-x”。但是由于Opera的用户较IE来说很少，并且作为个人网站，如果不在乎这些问题，大可以图简便地使用 “overflow-x”。

CSS是强大的，在你想方设法达到某种要求的时候，首先要想到它。

———————————-

PS：其实友情链接，怎么说呢，一直是个麻烦的问题。
一方面，在首页上显示很多友情链接，不太美观。但是，不完全显示，会影响点击率以及博友的意见。
而使用滚动的，或者Flash分页的链接，也不一定会有好的效果。凯尔就有这样的经历，在朋友的网页上找寻自己博客链接的影子，盯着滚动条好久了，也没有看到自己的链接，而其实我的链接是有的。另外，使用marquee滚动和Flash分页也会或多或少地影响搜索引擎的抓取，这将直接影响到你的站点在搜索引擎中的反向链接数据。

首先谈谈!important问题的引起（盒模型问题）：

在CSS标准中，一个盒模型包括4个区，分别是：内容、内边距（padding）、边框（border） 和外边距（margin）。而Width宽度的计算，CSS有它的标准。但是实际上，不同的浏览器的表现却不同。比如，

Firefox（FF）是准确按照CSS标准：width为内容的宽度，也就是说：
层的宽度 = “width” + “padding(left + right)” + “border-width(left + right)”；

而IE则把width作为整个层的宽度：
内容的宽度 = “width” – “padding(left + right)” – “border-width(left + right)”；

2007.10.03 update：IE7在一次更新中修正了盒模型的BUG，与Firefox的解析一致。2007.10.03验证。

IE的这种解析，被认为是一个BUG。但事实上，这种解释也不无道理，人们在设计页面的时候关注得更多的是盒子的大小，而不是内容的大小。正是因为浏览器的不同解析，给CSS的设计带来一些困难。

针对这个问题，我们经常使用!important来区分Firefox和IE6.0：

#content
{
width: 414px !important;
width: 400px;
padding: 5px; /*只给出一个值，表示上右下左的边距都为5px*/
border-width: 2px;
}

Firefox识别!important，而IE6不识别，且!important的width优先级高，因此FF理解为width: 400px，IE6.0理解为width: 414px，从而显示就相同了。

但是问题出在IE7，IE7.0对!important有了识别能力，但是对盒模型的解析却和IE6.0等一样，从而造成很大的麻烦。也就是说，!important的方法在IE7.0下变得不适用了。

而一般的情况下，border的使用相对较少的，并且border-width一般较小，因此最主要的问题就出在padding上了。网上很多人总结的经验是：padding要尽量少用，能用margin的，就别用padding。这种说法是消极的，问题的解决不应该总是回避。

盒模型问题的解决：

仔细想想，其实问题就出在“width与padding/border-width的同时定义”上，这个问题在CSS代码中一定要注意。而明白了这一点，解决的方法就不难想到了——

只要添加一个无width定义的wrapper层，把原来的一个content层拆分成2个层，分别地，在wrapper中定义padding和border-width，然后在content中定义width：

#wrapper { padding: 5px; border-width: 2px; }

#content { margin: 0px; width: 400px; }
<div id=”wrapper”>
<div id=”content”>
…
</div>
</div>

这样问题就可以得到解决，FF，IE6.0以及IE7.0都会获得相同的显示效果。更重要的是，没有使用任何CSS hack。

这种解决方法可以说是最终的方案，使用CSS hack的方法只是目前过渡阶段的临时方法。
对于网站构造，特别是对于样式比较复杂的网站，个人建议在重要的层快外加上wrapper层。

但是对于目前现成的模板，可以有选择修改部分样式，分别定义 “width” 与 “padding或者border-width” ，或者使用其他方法。

是否适合所有的浏览器？
理论上，这种方法应该适用于各种浏览器。
但是本人认为除非大型网站，兼容FF，IE6.0，IE7.0已经足够，这里也是主要针对这三个最主流的浏览器，IE更低版本，以及其他浏览器上的可行性有待验证。

PS：小站上面的很多地方使用了wrapper层，从而CSS样式表中没有使用一个!important。
本文属于个人见解，欢迎大家指正和补充~

如需转载，请标明本站的有效链接:http://yottaworks.net

这段时间学习CSS的过程中，觉得CSS还真是个麻烦的东西。由于没有个统一的标准，因而不同的浏览器各成一家，造成对CSS样式表的“理解”不同，引起很麻烦的兼容问题。比如IE和Firefox对width的定义不同，默认的字体大小不同，IE7与Firefox对某些定义的优先级不一样……

更讨厌的是，层中margin为负值的部分，IE6竟然干脆不显示，加上”overflow:visible”后也没有用，这完全可以说是IE6的一个BUG，一个大师级的BUG——这就是造成以前网页顶部截断的原因。而在IE7中，类似的问题就要少得多。个人还是建议使用IE7的（点击这里进入华军软件网下载页面）

尝试修改了好久，一直都是顾此失彼，最后只好放弃用同一个样式满足这3种浏览器的打算。可以说，很多网页在设计的时候，不得不为了兼容性的问题放弃一些很帅气的效果。

最终还是用CSS hack解决的，虽然hack是不符合规范的写法，如Jay所说的，在目前还没有很统一的标准这个过渡时期，用一用还是无妨的。

用hack解决兼容性问题的方法如下：

#example { background: red; } /* Moz FF */
* html #example { background: green; } /* IE6 */
*+html #example { background: yellow; } /* IE7 */

它的原理是这样的：第一行，3个浏览器都认识，但是Firefox不能理解下面2个，因此在FF中就会显示成红色。而IE6除了可以解读第一行外，还可以理解第二行，因而原来第一行的定义被后来读到的取代，从而显示出绿色。IE7同理。

不过要补充下，在兼容IE7的*+html的hack一定要在顶部加入!DOCTYPE 声明，否则无效
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”　”http://www.w3.org/TR/html4/loose.dtd“>

并且使用hack的方法较其他方法来说，相对简单，也很有效（但是个人从来都不认为CSS hack是好的办法，只是迫不得已使用），最后终于解决了在IE6，IE7，Firefox中的兼容性问题。
上面的3个浏览器并不是全部，还有Opera，IE5.5及以下，Netscape等众多浏览器，但是看看Kael’s blog的虚拟主机的统计信息：

可以看到，在Kael’s blog申请统计服务以来的19041位访客中，使用Microsoft Internet Explorer和Mozilla Firefox已经占到了所有浏览器的98.9%，其他浏览器都不足1%。而我是以个人建站为主，完全没有必要为其他浏览器占有的那么点零星的小数点大动干戈，劳神费力了。

PS：从统计信息我们看到现在崛起的手机网络市场。
使用Netscape（网景）访问小站的人数甚至没有手机浏览器的人多。