《CSS设计彻底研究》勘误与补充说明
我们十分感谢所有向我们提出问题的读者，你们使我们的书更加完善，谢谢你们！
勘误
（1）第54页第一段代码的第二行为“border-width:1px 2px 3px”，下面的解释段落“上边框为1px，下边框为2px，左右边框为3px”，正确的应该是：“上边框为1px，下边框为3px，左右边框为2px”。
（2）第27页，正文第5个圆点：这里显示为紫色，是因为在前面定义样式的时候,‘.purple’定义在’.red’的后面，覆盖了在.red中的定义，而不是在HTML设置类别的时候的前后关系，例如把“class=”后面的purple和red交换顺序，先是的仍然是紫色，而不是红色。
（3）第74页，第2行，“……就是……”，应改为“……加上……”
（4）第132页，中间代码部分的第1行，gte应改为lte。然后将它下面一段正文中的第二行：“并且在IE6以上”改为“等于或低于IE 6 版本时”。
（5）第98页，第一段代码的导数第2行,”Box-7″应改为”Box-8″。
（6）第113页，第二段代码的导数第2行,”boeder:1px #666 solid″应改为”border:1px #666 solid″。
（7） 第107页，不算代码的倒数第3行,”注意在字体和行高之间…″应改为”注意在字号和行高之间…″
（8）第127页，正文倒数第1行，“……第五章/图像/shaow……”应该为“……第五章/阴影/shaow……”
（9）第127页，图5.33中给出的Word图片是正确的，但是印刷后的图书中的效果不对，图片的边界很实，没有渐变了。
（10）第127页，正文倒数第2行，“……图像的上面和下面……”应该为“……图像的上面和左面……”
（11）第171页，代码上面一行，“方法是,在’#menu a:hover span{’这段样式中…” ，应该为“方法是,在’#menu a, #menu a:visited {’这段样式……”
（12）第204页，分析段落第二段开头，“解决办法是实现…”应该为“解决办法是事先………”
（13）第216页，倒数第二行“设置微…”应该为“设置为…”
（14）第73页，倒数第三行，修改并补充文字如下：
k：li的上下padding加上文本的行高，即10+14+10=34像素，上下padding都是10px，需要注意的是，中间的行高是14px，并不等于文字高度12px。文字的高度是12px，但是行高在默认情况是1.2倍于文字高度，12*1.2这里等于14，所以是34px。
（15）第73页，顶部代码第1行，改为：margin:20px 20px 20px 20px; /*margin为20像素*/
（16）第73页，顶部代码第8行，改为：border-width:5px; /*设置边框为5像素*/
（17）第205页最下一段代码，以及20页嘴上一段代码，在row4 和{ 之间多了一个逗号，加入此逗号会导致IE8 和Firefox将这一段CSS样式忽略，从而无法出现彩色的效果。注意本书光盘的源代码中其他相应的段落都需要做相同的处理。
（18）第21页，下端，对后代选择器的说明中，所举的代码例子存在问题。这段案例代码应该做一些修改，才能说明这个问题，将22页最上面的CSS代码修改为：
p b{
clolor:Blue;
}
这时的效果是，“这是最内层文字”为蓝色，说明里面的b元素被这个选择器选中了，接下来要说明“后代选择器”与“子选择器”的区别，我们可以将上面的CSS代码，修改为：
p > b{
clolor:Blue;
}
这时再看效果（用Firefox/IE7等支持子选择器的浏览器），可以发现，原来蓝色的文字变为黑色了，这就是因为由于b元素是p元素的孙子，而不是p元素的“儿子”，所以它不会被选中，也就不会设置蓝色，这就说明了“子选择器”的含义。
这样，效果是“这是中间层文字”，以及“这是最内层文字”都以蓝色显示，
（19）彩图中的第二个，合资模型结构图印错了，正确应该是图3.2才对，彩图的应该是对应于低版本的IE的情况，对于高版本的IE和标准的浏览器，都应该是图3.2中的描述。
补充说明
（1）第132页，最后一行，关于为什么要设置width:1px，当时写书的时候没有找到资料，是试验出来的，后来在微软的msdn上找到根据了，msdn上是这样说的：
The object that the filter is applied to must have layout before the filter effect will display. You can give the object layout by setting the height or width property, setting the position property to absolute, setting the writingMode property to tb-rl, or setting the contentEditable property to true。
意思是说：
这个滤镜要生效，那么使用这个滤镜的对象，比如这里的div，必须是定位过的。所谓“定位”过，可以使用以下几种方式实现：(1)设置了height或width属性；(2)或设置为绝对定位；(3)或将writingMode属性设置为tb-rl，(4)或将contentEditable属性设置为true。
9,340
温老师您好：关于本书65页元素浮动这块，当box-1,box-2,box-3向左浮动时，为什么下面的文本盒型模会将1′2′3box包含起来？
谢谢老师
温老师你好，光盘\CSS设计彻底研究\书中实例5\阴影\shadow-5.htm，在IE6打开之后左上角的背景图像没有出现，按照书中所说应该是可以正确显示的，对此有点疑惑。
发个勘误：
P56页，注意的最后一句话里padding和margin搞反了：
原文：
“在IE中，虚线空白的地方露出来的是padding部分的背景，而在Firefox中，虚线空白的地方露出来的是margin部分的背景。”
应该是：
“在IE中，虚线空白的地方露出来的是margin部分的背景，而在Firefox中，虚线空白的地方露出来的是paddingbbbbbbbbbbb部分的背景。”
P58页的[注意]那段已经说了盒子的背景色在IE中是覆盖”padding+内容”部分，在Firefox中是覆盖“border+padding+内容”部分；而P56页那个虚线就是border，所以在firefox里，border和padding的背景是相同的，而IE的border跟padding是不同的。所以原文肯定是错了。
justin ，
你说的对！谢谢你很仔细！
什么时候有修正版啊？
晓风，
目前买到的书应该已经修订过一次的，不过我没有仔细核对过是否我提交给出版社的修订内容，他们都做了修订。
我突然发现买的书缸页.从200页直接到了217页…中间的那部分没了……..怎么会这样/…我在淘宝上买的,,,难不成我买的是盗版………
霞咪 ，
请在图书的版权页，找到出版社的联系电话， 和他们联系，这种情况肯定可以给你换新的。
抱歉没有及时回复，我们最近很忙，下半年我们会拿出更多时间增加新内容的，欢迎来交流！
93页，“绝对定位的框从标准流脱离，这意味这它们对其后的兄弟盒子定位没有影响”是不是错误了？
feed，
就是这样的阿，绝对定位的框从标准流脱离，这意味这它们对其后的兄弟盒子定位没有影响，或者说，他的兄弟盒子就好像他不存在一样。
抱歉没有及时回复，我们最近很忙，下半年我们会拿出更多时间增加新内容的，欢迎来交流！
请问有没有详细的关于float定位的书籍呢，有些地方搞不懂，谢谢
飘 ，
关于float讲解得最清楚的应该就是《CSS设计彻底研究》的第4章了，那里面的那一系列动手实验，如果都跟着做一遍，应该就可以理解了吧。
论谈中怎么没人给开通个人空间呀?
张松，
抱歉给你开通晚了~~
老师,第157页,那个解决菜单上下灰边和左右宽度不同的问题.如果把#menu那个div的padding设成是0px 8px不是更方便?
77 ，
这本书是我前年写的了，具体细节记忆不太清楚了，我估计应该也可以，用CSS实现布局方法很多，只要把核心原理明白了，具体实现方法就可以灵活把握了。
我在当当网上购买（CSS设计彻底研究）这本书。怎么都几天也没人回复我？是不是书卖完了？
毛毛 ，
你可以用你的用户名和密码登录当当，可以查询你的书的发货进度。
一半来说，如果你不在北京，书到你手里，怎么也得几天的时间，于是大城市越快一些。
放心，当当不至于骗人。在如果不行，你可以打他们的客服电话问一下。
老师,有个问题搞不明白.有的代码里设了br然后样式里又设成了display none,那一开始不用br不就好了?试了下,好像没看出来有什么不同嘛?
77，
有的时候HTML是后台服务器生成的，比如CMS系统生成的，是你控制不了的，这时候用CSS可以把隐藏掉。
我想这可能是一个原因。
还有一个问题就是JQUERY中提供的TAB面板的UI插件中怎么把click事件改成mouseover事件. 就是说鼠标一经过就切换.. ???????????
张松，
这个好办，使用jQeury的Tab时，在创建的时候，带一个参数即可：
$(’.selector’).tabs({ event: ‘mouseover’ });
$(function(){
//直接制作Tab菜单，默认选择为第二项，且切换的时候fade动画
$(’.selector’).tabs({ event: ‘mouseover’ });
$(”#container > ul”).tabs({fx:{opacity:”toggle”,height:”toggle”}, selected:1});
});
是这样吗? 不管用的..
还有就是这个TAB是用ID做父极元素的．． 也就是说一个页面里边不能有多个这样的ＴＡＢ面板是吧？
张松，
我写的：
$(’.selector’).tabs({ event: ‘mouseover’ });
的意思是：把’.seectot’换成你需要的选择器~~~~
如果没怎么用过JS的话，花一些时间把基础掌握一下，再做后面的可能会容易一些。
还有就是这个TAB是用ID做父极元素的．． 也就是说一个页面里边不能有多个这样的ＴＡＢ面板是吧？
张松，
一个网页里可以放置多个，只要用id把各个Tab面板区分开就可以了。
不知道该说什么,太谢谢您了… 顺便这句话送给所有帮我的热心人.
恍然大悟
老师,94页那个height:1%,是啥意思啊,%是相对于它原来的高度?为啥这样子设,就能解决IE6中的错误呢?看得头晕了T T
77，
这个没有太多原因，就像生活中的一些偏方可以治病，也说不清原因。
当然，实际上还是有原因的，简单说是因为IE 6有的时候会漏掉计算某些盒子的参数值，加上这样一些值以后，目的是强迫是IE 6区计算这些漏算的值，就把问题解决了。
谢谢老师哈,回答得真详细啊~~支持一下下..嘿嘿,你们的3本书,我全买了,真不错啊~加油学习中~
您好. 我有点问题想问您..
就是12章12-6.html 这个实例中的
$(function(){
$(”li”).find(”dl”).prev().mouseover(function(){
$(this).next().toggle(1000);
});
$(”li:has(dl)”).find(”dl”).hide();
});
这个实验中.. 我把click 改成了mouseover..我想让鼠标离开后又渐渐消失．． 我怎么调也调不好．． 请你帮忙看下．．．
应该再在里面加什么代码？
张松，
mouseover事件仅在鼠标进入目标区域的时候触发，离开时不会有反应。
因此你希望鼠标进入时打开，鼠标离开时隐藏需要分别设置两个事件： mouseover 和mouseout。
或者用jQeury中定义的hover事件，本质上还是设置两个事件。
我知道的.. 你说的这两种办法我都试过.. 不过我都没做好.. 你能帮我写一下mouseout的事件函数吗? 我就是写不好. . 才来这问的.. 我想实现的是伸缩面板呀.. 请您结合12章12-6.html 这个实例给我写一下吗? 越祥细越好..
张松，
你是要实现鼠标离开的时候，二级菜单消失的效果？
等我过两天又时间的是后做一个详细的教程吧，最近太忙了，一两句话说清楚~
第92页…这时的效果如图4.25所示,以浏览器窗口为基准,从左上角开始向下和向左各移动30像素….是不是应该是从右上角?
77，
您说得对，是应该从右上角：）
第88页 #father div 这个CSS定义的什么?前面不是已经有了一个#father了吗?
dec ，
建议您从第一张开始学起，CSS的概念都是一环套一环的。
这里 #father div 和 #father 定义的是不通的对象的样式。前者时候后者的里面的div元素。
什么时候出校正好的第二版啊？
圣飞虹，
目前市面上买到的应该是第二次印刷的，在印刷之前，我已经将上述的勘误内容发给了出版社编辑，但是我现在不确认他们是否把每一条都修正了。
所以，如果您买的是第二次印刷的，也不妨花几分钟的时间核对一下。
谢谢！
老师,我刚学习网页制作时都是用的表格定位,突然看到用CSS+DIV定位,很想认真学习.不知道你们的那两本教材,我是只买就可以了，还是也买好了?
ivy-iris，
请参见这篇文章吧：
http://learning.artech.cn/20081210.select-css-book.html
老师,为什么写的代码在留本上却看不到?
代码发我们的论坛 http://talking.artech.cn ，那里可以发代码。这里会屏蔽代码~~谢谢
发到论坛，这里发代码会被屏蔽。
温老师您好;
请教一下有关清除浮动的问题,是不是有左右并列浮动div块时就需要在下面加清理？像下面的是不是需要加清除浮动?
六个苹果
1：关于清除，是否要使用清除，要根据你的需要，如果不希望环绕了，就要加清除，如果希望环绕，就不要加清除。
2：你把世纪你有困难的例子的代码发我们的论坛 http://talking.artech.cn ，那里可以发代码。这里会屏蔽代码~~谢谢
老师，
246页，分析中的倒数第三行“这需要为onmouseover事件（也就是鼠标指针离开）”中事件名错了，改下。
小九，
是这里错了，我以前也注意到了：）
温老师:css设计彻底研究p128那页关于滑动门的代码好像错了，做出来的效果怎么是阴影在左上角，而不是右下角？
凌墨，
比较一下你自己做出来的效果和光盘中案例的效果，看看能否找到具体是什么原因？光盘里的效果应该是没问题的吧？
如果还有问题，在跟我们联系吧，谢谢！
第74页对盒子模型的实际占据的宽度的说明好像有问题：firefox和ie6、7中的计算方法是不同的。ie中wdith包括margin、padding、border和内容占据的width，而Firefox中width仅指内容占据的宽度，实际占用的宽度还要加上margin、padding、border的宽度。注意中的说明更加迷惑人！！
红色代码，
你理解的有一点错误。
IE6开始已经按照标准的盒子模型了，IE5.5及以下才是不标准的盒子模型。Firefox和iIE6、7中的计算方法是相同的。
你可以自己写一个简单的页面亲自试一下就知道了。
ie6、7浏览的网页必须加上
代码，才能遵守标准的盒子模型！好像是……
声明为遵循xhtml1.0过渡类型的网页。ie6、7才完全遵循标准盒子模型！
红色代码，
花一两分钟试验一下不就知道了吗？please~~~
我试了一下，不用加DOCTYPE也一样，IE6/7/Firefox是一样的。
给你个网址分别用ie和ff测试一下：http://www.lwdx.cn/03.htm，图片大小128X128.
哦，多谢！
我刚才试了margin，没有试验border和padding，就想当然了。
在IE中，如果不加DOCTYPE声明，width里面是包括border和padding，不包括margin。刚才试了一下margin不包括在里面，以为border和padding也不包括在里面。
写书的时候，都加上了DOCTYPE声明，所以没发现这个问题。
OK，多谢，以后有时间我准们写一篇文章，详细说一下这个问题。这个DOCTYPE是比较麻烦哦。
谢谢老师辛苦了！不过里面有一些错别字哦！
daisy，
是啊，不好意思了。
我也找到错误，105页中间代码class=”.firstLetter”是不是应该不要一点？改为class=”firstLetter”呢？还有，394页，第二行，该文件位于本书光盘“第15章/no-css.htm”，但是光盘中并没有这个htm文件啊！
sunhole ，
谢谢，您说得对。
105页那里是多了个点。
394页书说的那个文件实际上和书里其他的禅意花园案例的html文件都是一样，你可以找到我们给出的几个案例，只要把css文件移走，就是这个文件了。
再次感谢！
今天刚拿到书，幸亏先来看了看，不然岂不是看起来很莫名其妙啊！
csser，
欢迎常来交流哦！
嗯看了大家的纠错觉得好多人都在认真哦，看完这本书之后我发现学会CSS的这些基础其实并不难，难点在于自己如何灵活的运用起来（我就是比较笨不知道活用CSS），关于灵活运用的书籍国内好像比较少见，国外有过这些书籍我看了下写得也不合中国人胃口（我说的是语言文字的表达方式），我非常恳求老师在这里每天写一些这方面的资料，让我们读者。。。。（是售后服务吗？）
米奇，
灵活运用一定是在扎实掌握的基础之上的，基础的东西往往看起来简单，实际上很东西不仔细研究是看不到的。就好像中学学数学，公式一共就那几个，但是变化出来的题目总有你做不出来的，仔细一想，还是没有把里面的道理相透彻。
所以关键就是把道理相透，孔子说学而不思则罔，思而不学则殆，真是永恒的真理。
关于一些技巧性的东西，或者容易忽视的东西，我遇到以后，会写成一些文章发在这里，您可以常来看看，有没有适合您的，希望对您和其他读者有所帮助！
第216页，倒数第二行“设置微…”应该为“设置为…”?
—————-
图书很好,真的很好.
Aymni ，
又是拼音输入法~~
第204页，分析段落第二段开头，“解决办法是实现…”应该为“解决办法是事先………”?
—————-
图书很好,真的很好.
Aymni ，
拼音输入法~~~
第171页，代码上面一行，“方法是,在’#menu a:hover span{’这段样式中…”
应该为“……在’#menu a, #menu,a:visited {’这段样式……”?
我有时看书的时候不一定在电脑边,纯靠思维逻辑,第二天手边有电脑才去看光盘文件,光盘中提供的文件是对的,只是书上可能写错了~
—————-
图书很好,真的很好.
Aymni ，
是，我都是先做好案例，案例没有问题之后，再一步一步讲解，这一步是讲解的时候疏忽了。
你说的学习方法很好，先靠“纯思维”想清楚，然后再动手实践，这样学的肯定不会很扎实，这样是真正的理解了道理。
第127页，正文倒数第2行，“……图像的上面和下面……”应该为“……图像的上面和左面……”?
—————-
图书很好,真的很好.
Aymni,
所言极是！
第127页，正文倒数第1行，“……第五章/图像/shaow……”应该为“……第五章/阴影/shaow……”?
另外,该页的图5.33中给出的图片好似也不对,图片的边界很实,没有渐变,可生成的边框却有渐变效果~
—————-
图书很好,真的很好.
Amyni，
1：如你所说，应该是“阴影”。
2：那个图像我在书稿里是放的一个正确显示的GIF图像，但是到出版社以后，他们排版的软件可能对GIF格式支持得不好，就成全黑的图像了，下次重印的时候，我问问他们负责排版的人。读者可以对照光盘中的文件看一下效果就知道了正确效果了。
谢谢Amyni！
#header,#pagefooter,#container{
margin:0 auto;
width:%85;
}
为什么width:%85在EXPRESSION WEB中提示属性值被标记无效
真是不好意思，原来是我自己写错了
达人，
呵呵，自己找到问题是对自己帮助最大的！
老师，您好。我看到343页的浮动法中似乎有一点小问题。
1.#header,#container,#pagefooter{margin:0 auto;}应该只有在火狐里才能实现居中效果的吧？
2.container宽度为760，而其中的content和side都向左浮动，但它们宽度之和如果等于container的话，在IE中没问题，但在火狐中side就会被挤下去的。
czhubo ,
1:这种方法居中在IE6和以上的IE都没有问题，IE 5.5 和以下没有试过，这本书的案例都是在IE6/IE7/Firefox中测试的，其他的浏览器没有测试过，因为在中国其他浏览器用的人太少了。
2:我们书上的案例固定宽度布局没有发现问题，只要保证分栏的宽度加起来小于或等于总宽度，就不会有问题。如果是变宽布局，用百分比表示的，加起来不能等于100%，你在实际制作需要试验一下，99.9也是危险的，最好多留出一点空隙。有一点，你在制作的时候，计算宽度要把padding、margin和border都算进去，否则可能会超出而订到下一行。
第107页，不算代码,倒数第3行,”注意在字体和行高之间…″应改为”注意在字号(大小)和行高之间…″?
呵呵,好似大家来找茬哦~~
Amyni，
你说得对，应该是字号或者大小。：）
第183页,中间部分#menu a.corner{……}应该改成#menu a span{……}吧？
buxianqiang，
书中这里没有错，书中这里在“a” 和 “.corner”之间是有空格的，这就是后代选择器了，它和“a.corner”是完全不同的。
“a .corner”这里等价于“a span.corner”，而不等于“a.corner”。
谢谢您的认真！
我只是觉着这本书很好,希望它能更加完美~
Amyni ，
非常感谢你的认真精神，以后我们的书出版之前请你作技术编辑，审一次稿子吧。书稿我们自己看有时看不出来，出版社的编辑不了解具体技术，真需要你这样的帮助。
加油~看好前沿,我也是在读的时候体会到了作者的态度,很感动,因为现在能安心的认真的为读者写一本计算机类图书的人真的不多了,我很开心自己选了这本书,很希望这本书能帮助更多的人,其实做好一本书真的不难,无它,认真而已.
第113页，第二段代码的导数第2行,”boeder:1px #666 solid″应改为”border:1px #666 solid″?
Amyni ，
是啊，又是笔误：）谢谢！
第98页，第一段代码的导数第2行,”Box-7″应改为”Box-8″?
Amyni ，
哈，这里是笔误了。
关于 第74页，第2行，“……就是……”，应改为“……加上……”
后面的”…即48像素…”应该是44像素吧?两行文字高度24,padding上下各10,共20,接着n=44px,48是怎么来的呢?
Amyni，
这里应该是书中写的48px，因为1行文字的高度是line-height高度，而不是font-size的值，由于这里没有设置line-height，所以是默认的line-height，通常line-height是font-size的1.2倍。所以是14px，下次修订的时候，我加上一个line-height的设置，会更清楚一些。
（2）第27页，正文倒数第2行，应该为“……以后者……的后面……”
没有错呀，就是“…此时以前者为准，‘.purple’定义在’.red’的前面，因此…”
把前改成后反而不对了吧？
这里显示为紫色，是因为在前面定义样式的时候,‘.purple’定义在’.red’的后面，覆盖了在.red中的定义，而不是在HTML设置类别的时候的前后关系，例如把“class=”后面的purple和red交换顺序，先是的仍然是紫色，而不是红色。这里写的时候也是疏忽了。
明白啦,很重要的概念咯~
我是作天才买的书CSS和JS.. 发现里边没有以上这现错误.. 我看了看是9月第二次印的.. 已经改过了是吧.. 还有就是JS里没错误吧,…
张松，
你是说《CSS设计彻底研究》吗？这本书最近印的是修改了，我提给了出版社勘误表，但是我不确认是不是他们把每一个都改了，如果你有时间，还是可以对一下。
JS书如果发现问题，我们会及时公布的！
谢谢您的支持！