前天，W3C发布了他们的网页编辑器 － Amaya 10。开源软件，提供了多平台的版本。编辑器除了支持HTML和CSS以外，还支持SVG(W3C制定的“可升级矢量图形”)和PDF等...遗憾的是目前还不支持中文对中文的支持比较差。
界面相对简陋，不过表达的十分清晰，标准的可视化工具。如果在中文的支持方面有所改善，绝对是网页设计师用来代替dreamweaver的好工具。本人由于长期受TextMate的照顾，不太习惯可视化工具，所以很快就放下了...
pre标签用来显示预格式(preformatted)文本，实际应用中我一般用来显示各种代码。
以前通常会给pre定义这样的CSS，使pre不被过长的文本撑破，而出现滚动条:
pre { overflow: auto; width: 515px; }
但是当横向、纵向滚动条同时存在时，很让人抓狂。于是在CSS 3中，white-space有了一个新的值pre-wrap，再加上一些浏览器的私有属性，我们就得到了解决方案：
pre {
white-space: pre-wrap; /* 支持css 3的浏览器 */
white-space: -moz-pre-wrap; /* 老版Mozilla*/
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* IE 5.5以上 */
}
来自：Wrapping the pre tag
“网站前台打杂”现在有了一个很响亮的名字 - “网站前端开发工程师”，但是我是设计师还是开发者呢？以下是一篇讨论这个问题的问题，翻译的有些生硬，浏览不顺的可以看看原文。
翻译至:Are we designers or developers?,作者 Roger Johansson
在站点的关于页面(原作者的about)，我称自己为“开发人员/设计师/应时作家”。这有一点模棱两可，我仍然在寻找一个答案：当别人问我靠什么来维持生计时，我的回答。我是一个设计师？网站开发人员？网站程序员？全部都是？都不是？这是很难用一句简单的话来回答。
我的答案会基于谁来问，什么时候问，为什么问，在什么情况下问。有时我会说“我在网络上工作” 或者 “我是做网站的”，任意一个答案都是真的，但是并没有真正的表达我到底是干什么的。显然给出一个简单明了的答案很容易。
在某个方面，我是一个十足的设计师，虽然最近在做一些没有花哨图案的设计。很多人错误的认为设计单纯的等于图形设计，但是我认为设计也可以是使创意变成现实的过程。当我这么做的时候，我可以称自己为网页设计师。
不可否认，如果“网页设计师”的头衔对我来说只是对工作内容的解释，这违背了我从网络泡沫得来的经验。那经验提醒我许许多多的外行人投身到网络，只是因为膨胀的网络需要更多的人而已。这同时让我想到业余的爱好者们只会使用破解版本的Dreamweaver 或者 GoLive提供的WYSIWYG模式来制作一个网站。所以我发现很有必要称自己为网页设计师。
作为另一个选择，有时我称自己为“网页开发者”。但是问题在于很多人都认为网页开发者更多的做后台程序，而我却很少做此类的工作。但是这听起来比网页设计师更专业。
我们还有什么其他的选择？嗯，还有这么些头衔像UI程序员，前端开发者，UE设计师等等，太多了，然而可以正确表达出我在做什么的却很少，这样对于那些并不是从事网络相关行业的人，就很难理解了。
这真的能成为问题吗？大多数情况下，不是。但是有点棘手的是理发师或者你的邻居并不能通过这些来明白你到底怎么维持生计。虽然“我在网络上工作” 或者 “我是做网站的”看起来很好的回答了问题，但这并没有告诉他们，你做图形设计，程序，或者其他的。
所以我想问那些，并没有真正意义上的做图形设计，但是主要使用HTML, CSS, JavaScript, and accessibility来工作的读者，两个问题：
- 你 认为 自己是一个设计师还是一个开发者?
- 你 称呼 自己是一个设计师还是一个开发者?
如果你得到了一个明确的答案，那就向答案的目标进发吧。
在"Styling lists and creating nav bars"章节发现一个对我来说很有用的ie bug fix:li {display:inline;}作者的注释是"Removes large gaps in IE/WIN".马上试验了一下，真的解决了一个长久困扰我的问题。
以前在做一些纵向的导航菜单的时候，经常会用到一个锚（a）的hover效果，范例可以看这里
li a {display:block;background:#000;color:#FFD800;}
li a:hover,li.here a {background:#570B06;}
这里我们把锚（a）块级化以后，在IE7.0之前的版本中，锚（a）后面会有一个空白textnode，另起一行的问题，这样便把各个li的间距加大了。我以前的fix方式，就是把html结构里li前后的空格都消灭掉，做法比较烦人...
现在好了，只要li {display:inline;}就可以了，多看书还是有益的 :)
Internet Explorer 7中的层叠样式表兼容性不知道怎么的就在MSDN上看见了这篇文章，都2007年了，我还是每天在网上闲逛。
在IE 7下，我的页面乱了、内容溢出了，文字重叠了...这些可能是用了IE 7以后，比较多出现的页面问题吧。不知道我的页面在IE 7下是怎么样的，应该不会有溢出的问题把。（希望）顺便推荐一个网站，可以给你返回各种浏览器浏览你网站的效果图片。（Test your web design in different browsers）
继续话题，文章上提到了几点引起这些浏览的问题关键：
处理overflow:visible的默认行为
设置了默认的高度和宽度，在IE 6的年代，内容如果超出范围，高度将会自适应的变化（好似很智能），但是在IE 7下就会有溢出了，如果你必须要制定一个最小的高度或者宽度的话，推荐使用min-height和min-width由于CSS hacks的改进而导致的错误页面(IE 7对于CSS支持的改进)
一些老的CSS hacks写法，比如用html > body，head + body，head:first-child + body等来区别IE和其他现代浏览器，因为IE 7已经支持以上CSS声明，所以也失效了，必须注意。
关于CSS hacks，可以看看以前的这两篇文章：
一些css hacks，主要是跨浏览器的兼容。（IE 7 和 Opera至今还没用过，购入新机器的计划又推后了...）有时候我们想针对同一个元素在不同的浏览器使用不同的样式定义，通常都是用来解决一些浏览器存在的bug.
- IE 6 及旧版本
* html {} - IE 7 用
*:first-child+html {} - IE 7 和 modern browsers
html>body {} - modern browsers (不包括 IE 7)
html>/**/body {} - Opera 9 及旧版本
html:first-child {}
比如现在有一个ID为wrapper的元素，我们想在IE 6以及以前的IE版本中下显示1px的红色边框，在IE 7里显示1px的蓝色边框，在modern browsers下显示2px的绿色边框。
#wrapper {background-color:#eee;width:990px;}
* html {border:1px solid red;} //IE 6以及以前的IE版本
*:first-child+html {border:1px solid blue;} //IE 7
html>/**/body {border:2px solid green;} //标准浏览器
还有一种IE注释方式，可以看这里IE条件注释方式
