深山老林

2006-06-07[原]定义小于18px的高

在IE中定义height时，如果值小于18px的默认行高时，得到的结果总是18px的高，这是个已经困扰了很多人的问题，这里我总结了相关的解决方法，希望能对你有所帮助吧。

一，使用overflow:hidden隐藏多出的部分。这个方法被大部分人所使用，效果还是不错的。

---------------------------CSS----------------------------------
.E{height:10px;overflow:hidden;}
------------------------------------------------------------------

二，使用小于12px的字号来强制IE改变默认的行高，同样可以实现效果，但在做CSS检查时会出现“字号太小”的警告。

---------------------------CSS----------------------------------
.E{height:10px;font-size:1px;}
------------------------------------------------------------------

三，定义小行高来实现效果。个人觉得这种方法更方便使用，而且不会有警告，推荐使用。

---------------------------CSS----------------------------------
.E{height:10px;line-height:1px;}
------------------------------------------------------------------

不要奇怪定义那么小，有文字怎么办，因为一般会用这么小的高，都是不会再加文字的，如果非要加，那就用第二种方法吧，相信也没人会看到你写了什么。

注意：如果你想让宽度也小于默认值的话，就得使用定义小字号的方法了。

2006-03-23[原]我的页面制作经验

前两天跟群里的"白菜"兄谈到了学习web标准中遇到的问题，觉得很值得写一下，是我对标准的一些理解，希望对在学习web标准的朋友有所帮助。

现在学习web标准的人越来越多，对于刚接触标准的人来说，我想大多数人的第一个印象就是用DIV+CSS制作页面，使用DIV来布局的确是标准的一个主要的特点，但标准并不只是用DIV+CSS布局，看过w3cn网站上的文章，你应该也了解到标准是"由符合标准的XHTML组成；用CSS来布局而不是表格；使用结构化、语义化的标记；能够在任何浏览器中显示"最后二点被大多数学习标准的朋友所忽略，结果就是现在很多用DIV+CSS制作的所谓"用标准制作"的页面，一查看源文件，都是 <DIV> <DIV> <DIV>……</DIV> </DIV> <DIV> …… </DIV> …… </DIV> ……，这样的页面在不支持样式表文件的浏览器中就是一堆没有分隔的文字，阅读都有困难，更谈不上可访问性了。"使用结构化、语义化的标记"是标准的一个重点，因为这直接就对不支持样式表文件的浏览器起作用。

下面是我的制作页面的一点经验，权当是总结吧，跟大家分享一下：

第一阶段：

开始制作的时候，应该先从没有样式表文件的页面做起，做到最基本的结构，就是使用结构化、语义化的标记，如用ul,li标签或dl,dt,dd标签等，这时你可以先不考虑布局的问题，只要做到在没有样式表文件的情况下也可以正常的阅读页面中的内容就可以了。要注意使用符合标准的(X)HTML语言，在这个阶段中不使用DIV标签。

第二阶段：

当完成第一个阶段后，再来就是布局了。我们要使用支持标准的浏览器来做为制作时查看的浏览器，推荐使用Firefox。这是为了让我们制作出来的页面更接近标准。这个阶段也要注意少使用DIV标签，因为CSS可以应用于任意的标签上，要好好利用现有的标签，只有当没有标签可以定义或现在的标签不能满足布局上的需要时，再使用DIV标签进行布局。也许你会觉得奇怪，为什么要少用DIV标签呢？因为DIV标签没有语义，添加过多的DIV标签会影响源文件的可读性，不利于日后的维护。

这阶段还有另一点需要注意的，就是图片的问题，图片分为"内容图片"和"背景图片"两种。意思很明显，内容图片就是用于内容中的图片，可使用img标签加入，注意要加alt属性；而背景图片就是用于装饰页面的图片，使用CSS的background-image属性加入。这一步也是为了保持我们上一步的成果，使之在没有样式表文件的情况下也不影响到显示。

第三阶段：

做完上面两个阶段，你的页面基本上已经可以通过W3C的验证了。现在我们来让它偏离一点标准，使它兼容多个浏览器。这个阶段是很无奈的，为什么呢？在IE中打开刚刚制作的页面就清楚了，也许你已经看到，整个页面的布局乱了。因为浏览器对CSS样式的兼容问题，使到我们现在还要做这一步。这时就得出动多个浏览器啦，最基本的IE5/IE5.5/IE6/FF，目前我就只有这几个版本的浏览器，应该也已经足够了吧。因为是在FF中做的页面，所以现在主要要解决页面在IE中的显示问题，在我BLOG上可以找到相关的一些资料，主要是使用hack，但hack不是标准，所以使用hack有可能会通不过W3C的代码验证。

我们不能为了通过验证而做页面，验证只是一种手段，让你知道页面是否符合基本的规范，但能通过验证，并不就是说你的页面达到标准，只能表示没有语法错误，象最开始提到的用DIV+CSS布局的页面，也是可以通过验证的。

还有就是一些细节，主要是一些制作上的习惯问题，像关闭每个标记、标记的每个属性都要有值等等，可能会觉得很烦琐，但只要在制作的时候注意一下，慢慢成为习惯，对于提高页面质量和制作效率是很有帮助的。

由于本人的写作能力较差，如果看得不太明白，欢迎给我留言。