CSS를 연습하려면 먼저 IE_Experience 교환에 대한 자세한 분석을 해결해야 합니다.
- WBOY원래의
- 2016-05-16 12:04:461304검색
更加坏的事情是，即使你仅仅针对IE设计，不考虑其它浏览器，由于IE模型绝对可以说是一只让人难以捉摸其脾气的怪物，所以你单纯为IE设计也会遇到众多难题，发现很多的效果总是绕来绕去都难以实现。
我们都知道，XHTML+CSS的目标就是实现内容与表现分离，理论上对于任何特定一份内容，我们都可以通过CSS实现任何我们想要的表现形式，或者细致地说是布局形式。虽然现实与这个目标有一定差距，但是CSS已经能够满足大多数常见的布局需求，这有CSS Zen Garden为证。然而如果你用的是IE，因为它难以捉摸，所以如果你想用一种简单优雅的CSS去让IE能够实现“任何你想要的布局形式”，那是不可能的，只有复杂繁缛的CSS才能够在IE上满足你的需求。我曾经提到过一种理论，“一个人对一个研究方向是否感兴趣很可能是完全靠偶然事件决定的，这就好像人第一次打羽毛球，如果你赢了几盘你就会感兴趣，如果你一直都赢不了你就会没兴趣”。IE在需要复杂繁缛的CSS这一点上，就足以令大多数的入门者却步。你总感觉到不得要领，你自然没兴趣学下去。
举一个例子说明这个问题，例如你不知道IE有hasLayout这回事，一个元素是否hasLayout对它的布局方式有重大影响，于是你肯定用最简单的思维去思考CSS，认为不同的CSS规则之间应该是松耦合的。“CSS应该被设计为简单优雅的”，你肯定会这样想，没错，它确实被设计为这样，不过IE不是这样去实现CSS罢了。我们用下面的代码去证明IE在quirks mode与standards mode之间的区别：
首先，我们用quirks mode看看结果如何，并且一个初学者看到这样的结果会去如何理解CSS规则。在quirks mode中，我们可以看到背景为红色的
包含了上面1行的文本，以及下面向左浮动的- 容器是完整包含内容的，当内容的总高度比容器大的时候，容器就会自然伸展以确保容纳内容。
- 浮动块也属于上述条件所要求通过伸展以确保容纳内容。
以上规则是完全错误的，一个懂得标准CSS以及理解quirks mode的设计师将会如此解释他的理解：
- 因为IE在quirks mode中会将height理解为min-height，所以它认为的高度不小于height指定的30px即可。而根据CSS标准，当height设置为30px时，高度就一定是30px，超出部分如何处理则由专门的CSS规则决定。
- 因为被设置了height属性，在IE中这就让它hasLayout了，这就导致它一定要包含所有的内容，包括浮动块。而根据CSS标准，浮动块是无需被完全包含的，它就浮动在那里，除非遇到设置了clear属性的元素，否则后继内容只会侧移避让。
好了，相信这个对比足以说明问题的严重性了，通过IE的效果去理解CSS，最终只会让你的理解与真实的CSS相差甚远。详细的standards mode与quirks mode带来的标准执行差别，可以参考这篇文章：CSS Quirks mode and strict mode。
然后肯定有人要问我，如果通过doctype确保使用的是standards mode，那是不是就没问题了呢？standards mode确实会让IE对CSS的解释合理很多，但事情并没有那么简单，这你可以通过实践去慢慢体会。你可以尝试在standards mode中设计CSS，并且尽力保持它们在IE/FF/Opera/Safari这4大主流浏览器中显示一致，随着设计的进行，你会发现这不是那么容易做到的。或许你不乐意花时间去fix其中的一些小问题，宁愿任由其中一些浏览器的用户看到比较丑陋的布局，但至少你已经了解到一个和上面例子类似的道理：不同浏览器即使同样在standards mode，其对CSS的理解仍然有所差异，而差异当中最多只可能有一个是正确的，甚至可能全部都是错误的。这篇CSS contents and browser compatibility就列举了众多浏览器对CSS支持的差异，一份CSS总会因为其中有一些规则在某些浏览器上是不支持的或者是buggy的，而导致你难以保持它们在不同浏览器上显示一致。
接下来可能还有人会问我，既然IE的市场份额最大（特别是在入门级的用户当中），又或者说我的客户指定使用IE作为客户端，仅仅针对IE设计CSS不好吗？为什么要针对FF之类的标准浏览器设计CSS然后再为IE进行fix？因为IE难以捉摸的脾气，让你无法将它的行为理解为一种简单优雅的规则，然后让你陷入CSS规则高度耦合的困境中。请看下面的例子：
现在，你在IE中看到的效果应该是左边出现，然后两个
이때 첫 번째
는마지막으로 이미 CSS에 대한 특정 기초가 있고 CSS 규칙에 대해 편견 없이 이해하고 있지만 CSS 규칙을 결합하는 상상력이 부족하여 소위 "원하는 레이아웃 효과 실현"을 달성할 수 없는 경우에도 마찬가지입니다. 즉, 내면의 능력은 발달했지만 표면적인 루틴이 부족할 뿐입니다. 이때는 "CSS 숙달/을 읽어 보시기 바랍니다. CSS를 마스터하세요》. 이 책을 읽고 나면 레이아웃이 있지만 구현하는 방법을 모른다기보다 레이아웃을 만드는 능력이 부족하다는 느낌만 갖게 될 것이라고 믿습니다. 또한 CSS 콘텐츠에 관심이 있으시면 제 블로그 구독을 고려해 보세요:
- 중국어 고양이(피드: http://feeds.feedburner.com/CatChen/중국어)
- dotNET의 고양이(피드: http://feeds.feedburner.com/CatChen/dotNET)
구정이 지나면 ASP.NET+CSS와 관련된 기사를 쓸 수도 있습니다. 지금은 ASP.NET+CSS 개발이 편리하지 않기 때문입니다. ASP.NET을 사용해도 2.0 CSS Friendly Control Adapters도 마찬가지이므로 문제를 해결하려면 페어링된 Control Adapter를 실제 상황에 맞게 맞춤 설정해야 합니다.