严格的（strict）xhtml标准里面，打开链接的目标属性如target="_blank"等，是不合法的。
作为一个标准，如果编制者如此如此规定，大家也就如此如此执行，皆大欢喜，而标准自成为标准。
但大家显然不准备照此执行——点击链接时新开窗口常常有其必要。
那么如果不用target="_blank"，又该怎么办？答曰：用javascript。比如：
如何？明眼人一看就知道，这其实是绕了个圈子，归根结底还是target="_blank"。
这是标准的莫明其妙。
为什么要做这种蠢事？其实标准再莫明其妙都无所谓，但坏事就坏事在W3C要整一个xhtml规范的检校认证出来。于是无数coder为了通过那个认证，就不辞辛劳地去绕那个大圈子。显然检校程序并不知道那段代码本质跟不符合标准的东西完全一样。
标准制定中的莫明其妙其实可以原谅，可能是因为疏忽，最多是因为偏执。但网页用户和Coder们的集体虚荣，就实在可鄙。通过了W3C检校又如何？
2006-10-18
2006-09-22
更改Blogger的“快速编辑”图标
Blogger的“快速编辑”还是很好用的，但并没有提供多种图标的选择，唯一的一个跟本站的界面不太和谐。原来是打算放弃“快速编辑”功能，但实际使用中发现没有它还的确不方便，那就还是用上吧，把图标改了就成。
Blogger的帮助文件提供了修改发送邮件图标的方法，但这个方法显然不能套用来修改“快速编辑”的图标。
我琢磨了一下，用以下方案可行：
这个例子修改了“快速编辑”图标，并且指定了普通、悬停两种状态使用不同的图标。如果只需要改为一个静态图标，就忽略第二段。
Blogger的帮助文件提供了修改发送邮件图标的方法，但这个方法显然不能套用来修改“快速编辑”的图标。
我琢磨了一下，用以下方案可行：
这个例子修改了“快速编辑”图标，并且指定了普通、悬停两种状态使用不同的图标。如果只需要改为一个静态图标，就忽略第二段。
2006-09-21
小心背景的fixed属性
在给标题、列表等做图标的时候，正确的方法是设背景。比如：
h2 {background:url(some.gif) no-repeat left top;}
但我做出来的效果在Firefox里面总是不显示图片，而在IE就正常，很郁闷。后来仔细检查，才发现代码跟上面不太一样：
h2 {background:url(some.gif) no-repeat fixed left top;}
去掉fixed，Firefox就能正常显示了。
no-repeat fixed，是设页面背景时做顺手了的，而在给标题、列表设背景时也没多想，习惯性地就敲出来了。
CSS看似简单，水还是挺深啊。
h2 {background:url(some.gif) no-repeat left top;}
但我做出来的效果在Firefox里面总是不显示图片，而在IE就正常，很郁闷。后来仔细检查，才发现代码跟上面不太一样：
h2 {background:url(some.gif) no-repeat fixed left top;}
去掉fixed，Firefox就能正常显示了。
no-repeat fixed，是设页面背景时做顺手了的，而在给标题、列表设背景时也没多想，习惯性地就敲出来了。
CSS看似简单，水还是挺深啊。
2006-09-18
[链接] 空白显示页面问题的解决
点击访问原作
在windows操作系统上使用IE作为浏览器时。常常会发生这样的问题：在浏览使用UTF-8编码的网页时，浏览器无法自动侦测（即没有设定“自动选择”编码格式时）该页面所用的编码。即使网页已经声明过编码格式：
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
，由此造成某些含有中文UTF-8编码的页面产生空白输出。
如果使用的是Mozilla、Mozilla Firefox、Sarafi的浏览器这不会造成这个问题。这是由于IE解析网页编码时以HTML内的标签优先，而后才是HTTP header内的讯息；而mozilla系列的浏览器则刚刚相反。
由于UTF-8为3个字节表示一个汉子，而普通的GB2312或BIG5是两个。页面输出时，由于上述原因，使浏览器解析、输出<title></title>的内容时，如果在</title>前有奇数个全角字符时，IE把UTF-8当作两个字节解析时出现半个汉字的情况，这时该半个汉字会和</title>的<结合成一个乱码字，导致IE无法读完<title>部分，使整个页面为空百输出。而这个时候如果察看源文件的话，会发现实际上整个叶面全部已经输出了。
因此最简单的解决办法是再网页文件的<head></head>标签中一定要把字符定义<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
放在<title></title>之前。
2006-09-14
h#标签的缺省值
h#的margin，在IE里面缺省值为0，但在Firefox和Safari里面top有个大约10px。后者比较奇怪。
所有有些地方需要强制指明h# {margin-top:0;}
里昂：皇家马德里中场休息时发现上述问题。里昂打得不错，皇马整体性太差了，光有大牌是不行的！其实里昂阵中也不乏骁将，尤其是新生代的法国国家队几个核心，只不过名气尚且不大而已。
2：0到70分钟了，继续看。
所有有些地方需要强制指明h# {margin-top:0;}
里昂：皇家马德里中场休息时发现上述问题。里昂打得不错，皇马整体性太差了，光有大牌是不行的！其实里昂阵中也不乏骁将，尤其是新生代的法国国家队几个核心，只不过名气尚且不大而已。
2：0到70分钟了，继续看。
2006-09-05
dp.SyntaxHighlighter
这个页面工具太赞了！
在WebReference闲逛的时候，发现了这个dp.SyntaxHighlighter。其作用是高亮页面内的源代码，效果见WebRef的文章。
更赞的是，dp.SyntaxHighlighter不但支持各种源代码，还是一个免费工具！
我会把这个工具用到本站上。
在WebReference闲逛的时候，发现了这个dp.SyntaxHighlighter。其作用是高亮页面内的源代码，效果见WebRef的文章。
更赞的是，dp.SyntaxHighlighter不但支持各种源代码，还是一个免费工具！
我会把这个工具用到本站上。
2006-08-30
一些收获
总算把“布局和表现分离”这一思路落实到了云影的Blog上。这几天研究下来，还是有些收获的。
在兼容性方面，应该优先考虑更规范的浏览器。在IE和Firefox之间，更规范的当然就是后者了。所以大部分调试工作应该放在Firefox当中，而不是IE当中进行。
多层背景的放置，有一个小技巧。首先，与内容无关的图片，按WEB规范应该做成背景图，而这并不光是规范问题，把图片做成背景还非常有利于定位。
我在云影的Blog里就是这样做的，有一层真正的页面背景，还有一层背景其实是顶部的Banner。最初我是把页面背景放在body标记里面、居中，而Banner是放在一个Headbox的div层里面、居中。
问题就出现了——在Firefox里面看，一切正常，但在IE里面，Banner比预想的位置偏左了1px！如果把body的左边距设成1px，那么在IE里面看上去就正常了，但在Firefox里面，Banner又会向右偏1px。
基于上面的“在兼容性方面，应该优先考虑更规范的浏览器。”，可以判定这是IE的Bug！但仍然要解决这个问题。
同时，这样的布局还带来别的问题——如果浏览器窗口缩小，在Firefox里面毫无问题，上下两层图片对应的位置保持不变；而在IE里面，body里面的背景边上却会出现一段未曾预料的边距。糟糕的IE！
如何解决？其实不难想到——把页面背景从body里面拿出来放在页面最外层那个定位容器里面就好。于是以上两个问题：偏移和边距，都解决了。
云影的Blog是放在Blogcn的。这是一家极其糟糕的Blog提供商，技术方面乏善可陈。但抱怨归抱怨，问题还是要解决。我在做这个“布局与表现分离”的过程中，遇到最大的问题就是Blogcn的标记兼容性太差。
模板里面没法放!DOCTYPE声明。
这样的后果就是没法让IE和Firefox对BOX的解释取得一致。在没有适当的!DOCTYPE声明时，IE里面的BOX尺寸是含边框、内边距在内的，而按WEB规范，这样是错误的。
那么如何在没有!DOCTYPE声明的情况下，让IE听话一点呢？我想到一个办法：嵌套DIV，让两层div的边框和内边距均为0，而内层div的外边距就充当了如果使用单层DIV时的内边距。
因为这两层DIV当中，边框和内边距都为0，所以不管浏览器加不加这两个尺寸，都没影响了。
这个技巧附带的好处是：在保持布局跨浏览器的兼容性的同时，可以使用一些IE特殊的属性，比如滚动条的自定义。按规范不应当这样做，但其实这样也满有趣。
对于嵌套DIV情况下，如何让外层DIV的高度自适应内层DIV，网上的论述很多了。就是让内层DIV具有float属性，成为浮动层，并在下边加上一个控制DIV，具有clear:both属性。
综合一下，还应该加上两条：
浮动层还应该具有display:inline;属性，以解决IE莫明其妙的边框加倍问题；
控制层为了不影响布局，可以把height、font-size和line-height设为0。
有一个调试中的技巧，可能大部分coder早就在用了，不过对我来说还是一个新的收获，因为毕竟以前还没有切实、全面地采用DIV+CSS。
具体做法是在调试时把各个DIV都加上“border:1px solid #color;”这样的属性。很简单，但很有效。
最后，我发现采用DIV+CSS、布局与表现分离的思路，用文本编辑器来写网页其实更方便、更舒服了。
在兼容性方面，应该优先考虑更规范的浏览器。在IE和Firefox之间，更规范的当然就是后者了。所以大部分调试工作应该放在Firefox当中，而不是IE当中进行。
多层背景的放置，有一个小技巧。首先，与内容无关的图片，按WEB规范应该做成背景图，而这并不光是规范问题，把图片做成背景还非常有利于定位。
我在云影的Blog里就是这样做的，有一层真正的页面背景，还有一层背景其实是顶部的Banner。最初我是把页面背景放在body标记里面、居中，而Banner是放在一个Headbox的div层里面、居中。
问题就出现了——在Firefox里面看，一切正常，但在IE里面，Banner比预想的位置偏左了1px！如果把body的左边距设成1px，那么在IE里面看上去就正常了，但在Firefox里面，Banner又会向右偏1px。
基于上面的“在兼容性方面，应该优先考虑更规范的浏览器。”，可以判定这是IE的Bug！但仍然要解决这个问题。
同时，这样的布局还带来别的问题——如果浏览器窗口缩小，在Firefox里面毫无问题，上下两层图片对应的位置保持不变；而在IE里面，body里面的背景边上却会出现一段未曾预料的边距。糟糕的IE！
如何解决？其实不难想到——把页面背景从body里面拿出来放在页面最外层那个定位容器里面就好。于是以上两个问题：偏移和边距，都解决了。
云影的Blog是放在Blogcn的。这是一家极其糟糕的Blog提供商，技术方面乏善可陈。但抱怨归抱怨，问题还是要解决。我在做这个“布局与表现分离”的过程中，遇到最大的问题就是Blogcn的标记兼容性太差。
模板里面没法放!DOCTYPE声明。
这样的后果就是没法让IE和Firefox对BOX的解释取得一致。在没有适当的!DOCTYPE声明时，IE里面的BOX尺寸是含边框、内边距在内的，而按WEB规范，这样是错误的。
那么如何在没有!DOCTYPE声明的情况下，让IE听话一点呢？我想到一个办法：嵌套DIV，让两层div的边框和内边距均为0，而内层div的外边距就充当了如果使用单层DIV时的内边距。
因为这两层DIV当中，边框和内边距都为0，所以不管浏览器加不加这两个尺寸，都没影响了。
这个技巧附带的好处是：在保持布局跨浏览器的兼容性的同时，可以使用一些IE特殊的属性，比如滚动条的自定义。按规范不应当这样做，但其实这样也满有趣。
对于嵌套DIV情况下，如何让外层DIV的高度自适应内层DIV，网上的论述很多了。就是让内层DIV具有float属性，成为浮动层，并在下边加上一个控制DIV，具有clear:both属性。
综合一下，还应该加上两条：
浮动层还应该具有display:inline;属性，以解决IE莫明其妙的边框加倍问题；
控制层为了不影响布局，可以把height、font-size和line-height设为0。
有一个调试中的技巧，可能大部分coder早就在用了，不过对我来说还是一个新的收获，因为毕竟以前还没有切实、全面地采用DIV+CSS。
具体做法是在调试时把各个DIV都加上“border:1px solid #color;”这样的属性。很简单，但很有效。
最后，我发现采用DIV+CSS、布局与表现分离的思路，用文本编辑器来写网页其实更方便、更舒服了。
2006-08-27
DIV + CSS 布局的几点体会
这个周末，白天接待彩虹，晚上研究网页设计到很晚，总算搞清楚了几个问题。有点累，倒也值得。
IE计算div的宽度，通常会忽略margin、border和padding的宽度属性，而Safari、Firefox不会。为了保持布局跨浏览器的一致性，必须在网页的head里面加上一段!DOCTYPE声明。
另一个涉及跨浏览器一致性的布局问题是li标记的list-style，在Firefox里面被解释得比较奇怪。务必留意。
学会了嵌套DIV情况下，如果让外层div的高度自适应子div的高度。这种情况经常出现在两列布局情况下。比如一列Blog正文，一列Sidebar。往往这两列都不可能正好等高，所以它们的背景就会出现高差，如果你不希望看到结果，最容易的解决办法就是把这两列div放置到一个外层的div当中，而用这个外层div的背景来替代列背景。但在普通情况下，这个外层div并不会如我们所愿——它并不会自动适应子div的高度。
解决这个问题的关键有两点：
第一：在子div中使用float属性；
第二：不指定浮动层的position属性。
多重Style的问题。虽然目前Firefox已经支持这个CSS官方要求的特性，但实际使用的时候，遇到的问题还是不少。IE和Safari根本就不支持，如果要实现用户选择Style，就得用script来处理。script还不够，比如在一个Blog里面，用户选择了“风格二”，但他在点击链接、评论或存档文件之后，或刷新之后，又回到了缺省页面——那么又得加上Cookie来存储用户选用的那个风格表……真是麻烦啊！
所以如果我要使用多重风格，我就只会简单地在页面告诉用户：如果你想使用多重风格，请使用Firefox浏览本页。
这样算是为Firefox做广告吧？呵呵。
多重风格必须要建立在DIV+CSS基础上。如果靠Table布局，改改颜色、字体什么的没问题，但做不到比如交换左右两列的位置之类的变化。
另外一个要点：把你能想到的所有内容都用div做出来。如果在某个风格里，你不想显示某些内容，很简单，用display:none把它们隐藏就好了。
IE计算div的宽度，通常会忽略margin、border和padding的宽度属性，而Safari、Firefox不会。为了保持布局跨浏览器的一致性，必须在网页的head里面加上一段!DOCTYPE声明。
另一个涉及跨浏览器一致性的布局问题是li标记的list-style，在Firefox里面被解释得比较奇怪。务必留意。
学会了嵌套DIV情况下，如果让外层div的高度自适应子div的高度。这种情况经常出现在两列布局情况下。比如一列Blog正文，一列Sidebar。往往这两列都不可能正好等高，所以它们的背景就会出现高差，如果你不希望看到结果，最容易的解决办法就是把这两列div放置到一个外层的div当中，而用这个外层div的背景来替代列背景。但在普通情况下，这个外层div并不会如我们所愿——它并不会自动适应子div的高度。
解决这个问题的关键有两点：
第一：在子div中使用float属性；
第二：不指定浮动层的position属性。
多重Style的问题。虽然目前Firefox已经支持这个CSS官方要求的特性，但实际使用的时候，遇到的问题还是不少。IE和Safari根本就不支持，如果要实现用户选择Style，就得用script来处理。script还不够，比如在一个Blog里面，用户选择了“风格二”，但他在点击链接、评论或存档文件之后，或刷新之后，又回到了缺省页面——那么又得加上Cookie来存储用户选用的那个风格表……真是麻烦啊！
所以如果我要使用多重风格，我就只会简单地在页面告诉用户：如果你想使用多重风格，请使用Firefox浏览本页。
这样算是为Firefox做广告吧？呵呵。
多重风格必须要建立在DIV+CSS基础上。如果靠Table布局，改改颜色、字体什么的没问题，但做不到比如交换左右两列的位置之类的变化。
另外一个要点：把你能想到的所有内容都用div做出来。如果在某个风格里，你不想显示某些内容，很简单，用display:none把它们隐藏就好了。
订阅：
博文 (Atom)