精通CSS--高级Web标准解决方案(最有用的CSS技术汇总，解密业界大师绝技)

翻译的如果能够专业一点，就完美了。内容没的说，问题就出在翻译上。。。。打了点折扣，如果初学css，建议从这本书开始吧，

总体来说，内容是不错的，小巧但是实用。不过翻译水平不够，很多句子读起来完全是西化的句子。而且技术图书翻译有些名词是翻译不到位比不翻译更糟糕。这本书里就是。任何一个编写CSS的开发人员，不可能不知道CSS Hack，这本书里非要莫名其妙地弄出一个“招式”来。我一直很纳闷“招式”是什么东西，看了才知道原来是 CSS Hack 。

另外印刷也非常粗糙，像这样一本书，图示是非常重要的。但是这本书里的图片印刷质量非常低。比如用CSS实现图片阴影那部分，作为效果演示的图片，跟原始图片相比，阴影几乎非常难以看到。

这本书如果放在书店里，相信除了标题和目录能比较吸引读者，翻开浏览一遍的第一印象肯定是不想买。希望出版社以后能够改进。不要由于印刷上的问题，浪费了大好的内容。

------------------- 第六部分 -------------------

（接[问题2]）
作者设置了垂直边框，以为万事大吉，殊不知IE中还是会出问题。〈fieldset /〉外面新套上的那层〈div /〉似乎把IE中的这个毛病解决了，为什么能，我不知道。最后，作为一种试探，我在没有应用前一解决方案的前提下，在样式表中为类“i3”添加一个样式属性“display: inline-block；”（按154页的说法，这使得元素z拥有了布局。注意，这个方法也有缺陷，详见下面在问题3中的分析）。结果，它一下子就解决了下边框断裂的问题和左下角纵向背景超出的问题。

[问题3]. 在应用前面的解决方案之前，先单独尝试分析一下gallery.html页面。实验表明：左栏向右错位的问题是由于在IE中未能正确对待“Black Convoy Gallery”部分的九张图片所占据的区域（一个类为“thumbnails”的〈div /〉）的宽度而导致的。似乎它的宽度最终把id值为“primaryContent”的那个〈div /〉（下称m）撑宽了，从而也把其父元素（id值为“wrapper”的那个〈div /〉）撑宽了。而左栏在文档中实际位置在右栏之后，只不过通过将margin-left设置为“-750px”而在呈现在左边罢了。右栏的宽度增加使得计算左栏的位置的基准线右移，最终产生的效果就是左栏有一个向右的位移。现在应用前面的解决方案。测试意外地发现，标题为“Black Convoy Gallery”的那个带圆角的区域，在上下滚动页面时会发生有时断裂、有时又能合拢的问题解决了（为什么能？我不知道）。在此基础上，将样式表中“thumbnails”类的margin-right值从40px减到30px，即可解决左栏错位的问题。至此，IE中的问题完全解决了。在Firefox中效果也完全正常。但是在Opera中却有点不对头：那些较宽的圆角区的右边部分会出现空槽。分析原因，应该是Opera中处理display为inline-block的元素的方式导致的。为了解决这个问题，只好使用一下hack手段：首先，删除前面在类“i3”的样式声明中添加的“display: inline-block；”，然后，在样式表中添加声明“* html .i3 { height: 1%； }”。这个解决方案在三种浏览器中都能成功解决问题。

总结上面关于案例1的分析，对于表单错位的问题的解决方案是完善的。而对左下角纵向背景超出问题、左边栏右错位问题、滚动时区域发生断裂的问题的解决则不太体面，因为虽然问题被解决了，但为什么能解决仍然说不清楚，感觉自己象是一个补锅匠。各位朋友如果能想出更好的办法，给出更合理、准确的解释，请不吝赐教。

小小一个例子，竟然出现这么多问题！三个作者中负责这个例子的Simon Collison着实令人失望。不仅如此，他讲述这个例子的方式也不敢恭维，给人的感觉就是表达能力不佳。本书封底对他的介绍中说道：“杰出的网页设计师……他撰写的一本CSS基础教程最近刚刚出版”。是的，他也许是一个杰出的网页设计师，但他写的书，我可不想看。

（未完待续）

------------------- 第四部分 -------------------

有了上述认识，修改后两个例子也很容易。其中第二个示例因为IE6不支持〈a /〉元素之处的所有元素上的伪元素“:hover”，所以在IE6中无法所有的效果（除非用点JavaScript），但是我们还是可以如前所述那样解决链接的激活区域问题。第三个示例（90页至93页）具体修改方案为：删去〈img /〉元素，为〈div /〉元素添加样式属性“background: url(images/group-photo.jpg) left top no-repeat；”，并把样式属性“height: 425px；”改为“padding-top: 425px；”，然后删去“#pic a .link”、“#pic .rich a .link”、“#pic .andy a .link”和“#pic .jeremy a .link”这四条样式规则。

四. 实例研究1简直就是一个反面典型。明显的有：
[问题1]. 在IE中显示时，带圆角框的区域左下角总有一个奇怪的白色赘生物。
[问题2]. contact.html页面中的那个表单，其下方的按钮在三种浏览器中看起来都不象按钮，倒象是一个文本框。而整个表单在三种浏览器中的显示结果各不相同。Opera中的看起来最好，Firefox中的表单未与上方的标题文字“The sexy contact form”左对齐。而IE中的效果最惨：输入框和它们的标题犬牙交错，非常难看，而且，下边的自定义边框与主体部分竟然几乎完全断开。
[问题3]. gallery.html页面在IE中显示时，两列布局中的左边那一列向右边错位约20像素，标题为“Black Convoy Gallery”的那个带圆角的区域，在上下滚动页面时会发生有时断裂、有时又能合拢的现象。

这三个问题分别分析如下：

[问题1]. 要明白其原因，首先需要了解自定义边框的生成机制。针对每一个类为“cbb”的〈div /〉（下称a），cb.js中的javascript函数生成了三个〈div /〉，className分别为“i1”（下称x）、“i2”（下称y）和“i3”（下称z），令x包含y、y包含z，并将a中原有的所有内容移进z中，然后令x成为a的一个子元素，将a的className改为“cb”，最后，在x之前插入一个新生成的〈div /〉（下称b），在x之后插入另一个新生成的〈div /〉（下称c）。b提供了左上角、上边框和右上角，c提供了左下角、下边框和右下角。而x的背景图像形成左边框，y的背景图像形成右边框。使用DOM查看器可以看出，左下角出现一个赘生物的直接原因是在IE中，x的高度错误地变得高于y和z（它们三个的高度本来应该是相等的，正如在Firefox中看到的那样），左下角冒出来的怪物正是x的背景的下端。为什么IE中x会高于y和z，我不知道，它的毛病发作的时候简直不可理喻。我在解决下面的问题2的过程中意外地找到了解决这个问题的办法——虽然不知道为什么能解决这个问题。参见问题2解决方案说明的最后部分。

（未完待续）

------------------- 第三部分 -------------------

三. 第五章最后三个例子（82页至93页）在IE6中不能正常工作。
其实它们的问题都是类似的，分析其中的第一个例子就行了。在83页到85页的这个图像映射示例，在IE中的异常表现是：当且仅当鼠标正好移至链接区域的边框上时，链接才能被激活。实验表明，在IE中，这种链接在被定位到图片上面的时候，必须设置非透明的背景色，否则就会出现这种问题（在其它情况下，并不需要这种设置）。对于这个例子来说，为链接区域设置背景色当然是不能接受的。进一步的实例表明：作为背景的图片不会对前方的链接产生不良影响。因此，这个示例的跨平台解决方案是：将外层的〈div /〉元素设置背景图像设置的〈img /〉元素的src属性所指的图像，然后删除〈img /〉元素。当然，为了实现跨平台也得付出代价：首先，这个示例中，从实际意义来说，图像本来应该是文档内容的一部分，但将其改为背景后，它不再属于文档内容，变成了呈现样式的组成部分。其次，虽然在IE和Firefox中，可以通过右击背景图像后选择相应的菜单项来获取图像，但在别的某些浏览器（如Opera）中却没有提供这种直接获取背景图像的功能，所以这个解决方案可能给需要下载这个图片的用户造成困难。在进行前述改动之前，先再分析一下这个示例的第二个问题，因为如果按前面的说明修改了之后，第二个问题就不容易看出来了。现在在〈div /〉元素之后加上一句话“Hello CSS”，在IE中查看，会发现这一行字与图片之前有一个较大的间距。在IE DOM查看器中可以看到，这个间距是被〈ul /〉元素占据的。块元素没有设置样式属性overflow或将其设置为visible值的时候，如果其指定的大小不足以容纳其内容时，标准的行为应该是不改变块元素的大小，但让内容溢出。但在IE中，拥有布局的块元素的大小将被自动扩展以适应内容。在本例中，由于〈ul /〉元素的存在，〈div /〉的高度实际上大于图片的高度，所以后续内容与图片底边就有了一个较大的间距。就本例而言，如果按前面的说明去掉〈img /〉元素，第一个问题解决了，而且由于〈ul /〉块将上移，其顶边与〈div /〉的顶边对齐，看起来第二个问题也解决了。且慢，试着用鼠标去激活几个链接，会发现对于第一个人，鼠标如果指向其鼻子以上的部分就不能激活链接。使用DOM查看器，发现这似乎是由于第一个〈li /〉中的〈a /〉被后面两个〈li /〉盖住了，依CSS标准来看，这当然是荒唐的行为，但IE就是这么干的。对于本例，完整的解决方案应该是：去掉〈img /〉元素，为〈div /〉元素添加“background: url(images/group-photo.jpg) left top no-repeat；”、“padding-top: 425px；”和“overflow: hidden；”这三条样式属性，并把〈div /〉的样式属性height的值改为0px。另一个方案是：去掉〈img /〉元素，去掉〈ul /〉和〈li /〉元素，让〈div /〉元素只包含赤裸裸的三个〈a /〉元素，并把原来〈li /〉元素中的class属性添加到相应的〈a /〉元素中，为〈div /〉元素添加样式属性“background: url(images/group-photo.jpg) left top no-repeat；”，去掉“#pic ul”那个规则，把“#pic .rich a”、“#pic .andy a”和“#pic .jeremy a”分别改为“#pic a.rich”、“#pic a.andy”和“#pic a.jeremy”。后一种方案看起来更简洁。如果不需要列表提供的语义的话，我更喜欢后者。

（未完待续）