我们共同的家【欲练CSS 必先宫IE】

河南新华电脑学院社团在线奇点WEB工作室【欲练CSS 必先宫IE】

本主题被查看539次, 共2个帖子, 1页, 当前为第1页选择页数: 1 跳转到第页上一主题下一主题

kekeliu

叫我-阿光

版主

UID: 221
来自: 上海
精华: 0
积分: 191
帖子: 184
注册: 2007-9-21 12:11:02
状态: 离线
威望: 0
金钱: 26.60 元

发短消息用户资料树型回复引用

只看楼主 2007-11-05 17:00

【欲练CSS 必先宫IE】

下面是我抄的一段话，好好看下吧

【欲练CSS 必先宫IE】

IE的市场份额最大（特别是在入门级的用户当中），又或者说我的客户指定使用IE作为客户端，仅仅

针对IE设计CSS不好吗？为什么要针对FF之类的标准浏览器设计CSS然后再为IE进行fix？因为IE难以

捉摸的脾气，让你无法将它的行为理解为一种简单优雅的规则，然后让你陷入CSS规则高度耦合的困

境中。请看下面的例子：<div style="background-color: red; border: 2px black solid">

<img style="float: left; width: 200px; height: 160px" src="blank.gif" />

<div>Hello</div>

</div>

<div>Hello</div>

现在，你在IE中看到的效果应该是左边出现<img />，然后两个<div />内的Hello都向右偏移以避让

<img />这个浮动块了，其中上面的<div />仅仅占用移行的高度，因为它没有声明高度，所以就是自

然高度，也就是一样，这些都很好理解，所有规则都是解耦的。然后向例子中增加对第一个 <div />

的width属性复制，看看结果会如何：

<div style="background-color: red; border: 2px black solid; width: 600px">

<img style="float: left; width: 200px; height: 160px" src="blank.gif" />

<div>Hello</div>

</div>

<div>Hello</div>

这时候第一个<div />完全容纳了<img />，把第二个<div />挤到下面了。这该怎么解释呢？我们可

没有设置它的height属性哦，难道又犯之前例子所说的因为hasLayout而必须容纳所有内容？正解，

这就是IE难以驯服的地方，一个应该是完全独立的width属性，设置之后引起了高度以外的其它影响，

这让人无法尝试以一种简单优雅的方式去理解IE 的行为。这就证明了，如果你要学习如何为IE设计

CSS，就先要学习标准CSS，再加上对IE怪异行为的理解，比仅仅学习如何为一个标准浏览器设计要难

多了。这时候你是不是想说，“如果客户愿意放弃IE，甚至全世界都愿意放弃IE，那就实在太美好

了”，没错，这才是正确的想法，一心想着仅针对IE设计以求方便只会让你走火入魔。

最后，如果你已经有了一定的CSS基础，对CSS规则都理解无偏差，却缺乏组合CSS规则的想象力，无法

做到所谓的 “实现任何你想要的布局效果”，这也就是说，你的内功已练成，仅仅差一些表面的套

路，这时候我推荐你去看《CSS Mastery/精通CSS》。看完这本书，相信你只会觉得自己缺乏布局的创

造能力，而不会有布局却不知道如何实现。