刘建's Blog-哈尔滨网站建设

刚学网页制作的时候，老师曾经告诉我必须用CSS强制定义字体大小，否则保证每个人都看到一致的效果。这一点在现在的中国站点尤为明显。包括网易、搜狐这些门户网站在内的大部分站点，用的都是绝对单位px（像素）。但是，如果从网站易用性方面考虑，字体大小应该是可变的，一些视力不是那么好的人需要放大字体才能看得清页面内容。然而，占据大部分浏览器市场的IE无法调整那些使用px作为单位的字体大小。国外人士非常重视网站的易用性，相当一部分外国站点已经使用em作为字体单位。

1em指的是一个字体的大小，它会继承父级元素的字体大小，因此并不是一个固定的值。任何浏览器的默认字体大小都是16px。因此，12px = 0.75em。实际应用中为了方便换算，通常会如下设置样式：

html { font-size: 62.5%; }

这样，1em = 10px。我们常用的1.2em理论上就是12px。但是，这个换算在IE浏览器下不成立，1.2em会比12px稍大一些，解决办法是把html标签样式中的62.5%改成63%，即：

html { font-size: 63%; }

在中文的文章中，一般会在段首空两格。如果用px作为单位，对12px字体来说需要空出24px，对14px字体来说需要空出28px……这样换算非常不通用。如果用上em单位，这个问题就很好解决了，1个字的大小就是1em，那两个字的大小就是2em。因此，只需这样定义就行了：

p { text-indent: 2em; }

Firebug Lite 源自 Firebug ，可使用在IE、Opera、Safari 浏览器上。最新版本为 Firebug Lite 1.2 ，不仅包含了旧版本的console.log 命令，还可查看 DOM 元素、跟踪 XHRs，操纵 HTML、 CSS 和 JavaScript 。

Firebug Lite 可以在页面中插入调试：
<script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
还可以创建 Firebug Lite 书签调试（推荐）：

javascript:var firebug=document.createElement('script');firebug.setAttribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js');document.body.appendChild(firebug);(function(){if(window.pi&&window.firebug){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);
当然你也可以将文件下载到本地调试。

更多介绍请看：http://getfirebug.com/lite.html

由于连续的字符（字母、符号、数字）在默认情况下是不换行的，可能会破坏整个界面布局。
那如何解决这个问题呢？
在 IE 和 Safari
1.3+ 下相对比较容易解决，使用 CSS 属性 href=”http://www.w3.org/TR/css3-text/#word-wrap” target=_blank>word-wrap:
break-word;。有朋友会问为什么不是使用 href=”http://www.w3.org/TR/css3-text/#word-break”
target=_blank>word-break:break-all;
，因为有一个特殊的情况，该属性无法解决换行——连续的英文标点符号。

注： href=”http://www.w3.org/TR/css3-text/#word-break”
target=_blank>word-break 主要使用在 CJK
文本，即：中文（Chinese）、日文（Japanese）、韩文（Korean）。
而 Firefox 和 Opera 浏览器，无法识别
word-wrap: break-word; 和 word-break:break-all; 属性。可以通过脚本给连续字符的每个字符之间插入 \ u8203
的字符（该字符在非 IE 浏览下不占据空间），使连续变为了不连续，达到了换行的效果。
breakWord =
function(dEl){
    var dWalker =
document.createTreeWalker(dEl, NodeFilter.SHOW_TEXT, null,
false);
    var node,s,c =
String.fromCharCode(’8203′);
    while
(dWalker.nextNode()){
        node =
dWalker.currentNode;
        s = trim(
node.nodeValue )
.split(”).join(c);
        node.nodeValue
= s;
    }
    return
true;
}
详细的脚本，可参看 href=”http://www.hedgerwow.com/”>Hedger Wang 整理的脚本 title=”Cross Browser Word Breaker”
href=”http://www.hedgerwow.com/360/dhtml/css-word-break.html”
target=_blank>《Cross Browser Word Breaker》
对于 Firefox
，你还可以通过 target=_blank>XBL bindings 来实现此效果： title=”Emulating CSS word-wrap for Mozilla/Firefox”
href=”http://blog.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/”
target=_blank>《Emulating CSS word-wrap for Mozilla/Firefox》

强制不换行

自动换行

强制英文单词断行

对于相同的结构，我们可以通过CSS来创造出40种不同的布局，可以从中学到布局的很多知识，也可以体验出CSS的强大和标准的便捷。

http://blog.html.it/layoutgala/

//显示属性
display
list-style
position
float
clear

//自身属性
width
height
margin
padding
border
background

//文本属性
color
font
text-decoration
text-align
vertical-align
white-space
other text
content

IE 官方提供的 IE5 到 IE8 的 CSS 兼容列表：《CSS Compatibility and Internet Explorer》

一些前端开发 IE 中的常用调试工具：

1. Microsoft Script Debugger —— Companion.JS need to install this
2. Companion.JS —— Javascript debugger for IE , like Console API feature
3. IE Developer Toolbar —— Like Firebug (DOM/CSS etc)
4. Fiddler —— Web Debugging Proxy
5. HttpWatch —— HTTP viewer

Fiddler
一个很强大的http流查看工具
http://www.fiddlertool.com/fiddler/

Httpwatch
数据分析工具,头消息接受/发送的查看,POST数据查看.等等
http://www.httpwatch.com

IE Developer Toolsbar
IE下的FireBug.HTML及CSS调试工具
http://www.windowsmarketplace.com/details.aspx?itemid=2695980

Companion.JS
IE下的javascript调试工具.福音啊!福音啊!!福音啊!!!
http://www.my-debugbar.com/wiki/CompanioNJS/HomePage

FireBug
强的没话说了已经….如果你不知道这是什么….那我更没话说了….
https://addons.mozilla.org/en-US/firefox/addon/1843

Web Developer
FireFox下的查看工具,可以查看JS,CSS等页面信息
https://addons.mozilla.org/en-US/firefox/addon/60

YSlow
why slow?页面性能优化查看器.基于FireBug
http://developer.yahoo.com/yslow

Javascript Debugger
FireFox下的javascript调试工具,比FireBug有更强大的调试功能.
https://addons.mozilla.org/en-US/firefox/addon/216

Opera Developer Tools
Opera下的DOM,CSS查看工具,类似FireBug.
http://dev.opera.com/articles/view/opera-developer-tools/

webkit
Safari下的开发调试工具
http://nightly.webkit.org/

前言：对于 Hack 的使用，一直以来不提倡，应该尽可能的知道为什么，从根本上去解决问题，而不要遇到问题就 Hack，我们应该对代码“不作恶”，尽少使用，甚至不用。

对于 IE8 beta1 可以尝试下面的 Hack：

/*/ selector { … } /**/

此规则仅 IE8 beta1 识别，而其他 A-grade 浏览器都不识别。

不过这个 Hack 也许会在 IE 的 beta2 版本或正式版中被修复，暂可作为 IE8 beta1 调试之用。