浏览器兼容问题

http://www.1987y.org/archives/229
====================================================

浏览器兼容问题一直困扰着很多WEB设计师,当然有时也困扰着我.它如附骨之蛆一般让人讨厌,在此我向各浏览器开发商表达一下问候.

有了问题自然要解决,在学习及应用WEB标准的过程我一直都在思考这些问题,解决这些问题.到后来问题越来越少了,已经很少遇到兼容问题了.

为什么会这样,是我写代码的经验越来越丰富了?还是浏览器升级得越来越标准了?还是我变成高手了?或者我人品越来越好了?

我觉得除了最后一点有可能之外,其他的都不是主要的原因.因为大家都要努力提高自己的人品.(别呸!)


扯远了,自我检查了一下,我发现最主要的原因是我学会 布局 和 分析 了.

布局(设计师)

作为设计师,在作效果图的时候就已经在考虑页面上的DIV构架和JS的效果了.不会去追求花里胡哨的东东了,以简单为美,以横平竖直为主,有效果也是放在广告图上来出现的.效果图的分块的宽度已经基本固定在某个范围内了,而且我发现越到后来作的东西跟当初作设计的初衷越远了.设计站上的收录的漂亮站点也开始有点不喜欢了.

分析(前端)

作为前端开发,在看到别人的效果图的时候,心里首先要想到的是怎么把这张页面拆了.切图就像建房子,我现在已经习惯把网页用手先分成一块一块的.最后只有“上(中)下”、“左（中）右”的结构了。我不用HACK，不用important,不用filter,基本不用position，以前经常用的东西都逐渐舍弃掉了。返璞归真了。

最基本的布局反而最容易达到标准，为了实现而实现反而会需要很多HACK，或者针对不同的浏览器来写，这样代码量不但没有缩小反而有增加。


---我的习惯(经验)---

1.DIV布局的时候模块化.保证每一块代码独立出来都是平整的.在DW里用设计视图看的时候也是工整的,没有形变,没有长短不齐.
2.左(中)右结构的处理方法.我用float,如left,right,clear.从来都直接清除。
3.上(中)下结构的处理方法.我就用id-top、id-body、id-bottom,id-body中间放一个id-con，里面的东西就用class.如：.id-con , .id-list, .id-img , .id-text等等.
4.全局需要定义的CSS，这个网上很多。我不多说了，我还喜欢定义一个字体颜色专用的css段.比如中国红，银灰，支付宝橙（希望你们能听懂）等等。
5.还有常用的东西,比如说:下划线|  .bdrla, .bdrlb,分别定义border-bottom为实线或者虚线。颜色默认用灰色。依此类推。
......
逐渐形成一种书写习惯，形成一种框架，作起事情来不断没有遇到兼容问题，而且效率很高。

可能有人会说，你的这种习惯能解决一些刁钻古怪的问题么?当然可以。因为你只有效率比别人高，解决普通的问题的时间才会比别人短，这样就有时间来研究特殊的应用。如果连基本的问题都没有搞通搞懂，就在研究一些困难的问题，那么就算解决了这些问题，你自己觉得你就是高手了么？
人说网页设计师就像戴着枷锁跳舞的舞者.戴着枷锁跳舞的时候，你首先得把体力锻炼得能扛得住这个枷锁，然后才能去研究怎么跳出优美的舞步。而我现在已经在尝试用优美的舞姿征服别人了。你呢？






===========================

DIV+CSS开发浏览器的兼容性
1. 文字本身的大小不兼容。同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占高16px，下留白3px，ff 下实际占高17px，上留白1px，下留白3px，opera下就更不一样了。解决方案：给文字设定 line-height 。确保所有文字都有默认的 line-height 值。这点很重要，在高度上我们不能容忍1px 的差异。

2.ff下容器高度限定，即容器定义了height之后，容器边框的外形就确定了，不会被内容撑大，而ie下是会被内容撑大，高度限定失效。所以不要轻易给容器定义height。

3.横向上的撑破容器问题，。如果float 容器未定义宽度，ff下内容会尽可能撑开容器宽度，ie下则会优先考虑内容折行。故，内容可能撑破的浮动容器需要定义width。

小实验：有兴趣大家可以看看这段实验。在不同浏览器下分别测试以下各项代码。

a.<div style=”border:1px solid red;height:10px”></div> b. <div style=”border:1px solid red;width:10px”></div>

c. <div style=”border:1px solid red;float:left”></div> d. <div style=”border:1px solid red;overflow:hidden”></div>

上面的代码在不同浏览器中是不一样的，实验起源于对小height 值div 的运用，<div style=”height:10px;overflow:hidden”></div>，小height 值要配合overflow:hidden一起使用。实验好玩而已，想说明的是，浏览器对容器的边界解释是大不相同的，容器内容的影响结果各不相同。


4.最被痛恨的，double-margin bug。ie6下给浮动容器定义margin-left 或者margin-right 实际效果是数值的2倍。解决方案，给浮动容器定义display:inline。

5.mirror margin bug，当外层元素内有float元素时，外层元素如定义margin-top:14px，将自动生成margin-bottom:14px。 padding也会出现类似问题，都是ie6下的特产，该类bug 出现的情况较为复杂，远不只这一种出现条件，还没系统整理。解决方案：外层元素设定border 或 设定float。

引申：ff 和ie 下对容器的margin-bottom，padding-bottom的解释有时不一致，似乎与之相关。

6. 吞吃现象。还是ie6，上下两个div，上面的div设置背景，却发现下面没有设置背景的div 也有了背景，这就是吞吃现象。对应上面的背景吞吃现象，还有滚动下边框缺失的现象。解决方案：使用zoom:1。这个zoom好象是专门为解决ie6 bug而生的。

7.注释也能产生bug~~~“多出来的一只猪。”这是前人总结这个bug使用的文案，ie6的这个bug 下，大家会在页面看到猪字出现两遍，重复的内容量因注释的多少而变。解决方案：用“<!–[if !IE]> picRotate start <![endif]–>”方法写注释。


8.img 下的留白，大家看这段代码有啥问题：

<div>
<img src=”" mce_src=”" />
</div>

把div的border打开，你发现图片底部不是紧贴着容器底部的，是img后面的空白字符造成，要消除必须这样写

<div>
<img src=”" mce_src=”" /></div>

后面两个标签要紧挨着。ie7下这个bug 依然存在。解决方案：给img设定 display:block。

9. 失去line-height。<div style=”line-height:20px”><img />文字</div>，很遗憾，在ie6下单行文字 line-height 效果消失了。。。，原因是<img />这个inline-block元素和inline元素写在一起了。解决方案：让img 和文字都 float起来。

引申：大家知道img 的align 有 text-top，middle，absmiddle啊什么的，你可以尝试去调整img 和文字让他们在ie和ff下能一致，你会发现怎么调都不会让你满意。索性让img 和文字都 float起来，用margin 调整。


10.clear层应该单独使用。也许你为了节省代码把clear属性直接放到下面的一个内容层，这样有问题，不仅仅是ff和op下失去margin效果，ie下某些margin值也会失效
<div style=”background:red;float:left;”>dd</div>
<div style=”clear:both;margin-top:18px;background:green”>ff</div>

11.ie 下overflow:hidden对其下的绝对层position:absolute或者相对层 position:relative无效。解决方案：给overflow:hidden加position:relative或者position: absolute。另，ie6支持overflow-x或者overflow-y的特性，ie7、ff不支持。

12.ie6下严重的bug，float元素如没定义宽度，内部如有div定义了height或zoom:1，这个div就会占满一整行，即使你给了宽度。float元素如果作为布局用或复杂的容器，都要给个宽度的。

13.ie6下的bug，绝对定位的div下包含相对定位的div，如果给内层相对定位的div高度height具体值，内层相对层将具有100%的width值，外层绝对层将被撑大。解决方案给内层相对层float属性。

14.width:100%这个东西在ie里用很方便，会向上逐层搜索width值，忽视浮动层的影响，ff下搜索至浮动层结束，如此，只能给中间的所有浮动层加width:100%才行，累啊。opera这点倒学乖了跟了ie。
15，有时候加上div{overflow:hidden}这个样式那三个浏览器就会相同了
http://user.qzone.qq.com/393107304   在这个空间的留言板里也述说了关于这个问题的相关方面