在surfing过程中，在淘宝UED的《Reset CSS研究（八卦篇）》中得知了如何查阅给予gecko内核的浏览器的HTML默认样式的清单的方式（只需要在gecko内核的浏览器中的地址栏中输入：resource://gre/res/html.css即可），下面提供了我在Firefox3.6.4版本中获得的HTML.css清单。将它代码高亮，有助于阅读，同时由于篇幅问题，对于webkit内核的浏览器、IE6的HTML默认样式，仅提供一个url链接：《webkit内核的HTML.css(Chrome,Safari)》，《gecko内核的HTML.css(Firefox)》，《ie6的默认样式》，《HTML4默认样式》，《CSS1默认样式》，《IE6、7、8默认样式对比列表》，《CSS2.1 User Agent Style Sheet Defaults》，《Mozilla quirk.css》，《Symbian default CSS》。 各种浏览器之间对HTML元素默认的样式的不统一性，正是YUI reset css、HTML5 Reset Stylesheet以及Eric Meyer’s CSS reset被提出来的必要性。 更多参考：《踏上寻找webkit内核渲染HTML的默认样式之路》，《HTML默认样式和浏览器默认样式》，《Reset CSS研究（八卦篇）》，《Really … 了解更多
在布局页面的时候，使用浮动布局是司空见惯的事情，但是在清除浮动（float）方面，也确实比较纠结，特别是在IE6、7下，问题多多，bug爬来爬去，很恶心。我们来看看清除浮动的几种方式： 第一种：普通方式。这种方式是比较多人会想得到 [javascript] .clear-float{ clear:left; font-size:0; /*非常有必要声明这个，否则IE6下容易恶心*/ height:0; margin:0; padding:0; } [/javascript]
今天在做页面的时候，有一个tab组件的需求，需要切换样式: tab在切换的时候如上面图片所示，左右一个像素的border，上面2像素，下面一个白色像素来覆盖边框。这个在FF等非IE内核的浏览器下显示没有问题，可是在IE浏览器下《问题页面》: 在IE下，激活tab右下角总是多出了一像素高度，为着这个IE下的一像素问题，快崩溃了。最初还以为是IE bug，测试来测试去，最后发现是IE渲染border的方式跟FF等浏览器不同。按原理来说，应该是top、bottom覆盖left、right的border颜色（FF等浏览器正是这么做的），可是IE却不是，它是按照逆时针，类似于是拼接似的来渲染border。这个问题只有在一个像素宽的border的时候才会出现，当大于一像素的时候，问题不存在。 《更新的测试页面》
今天在看一篇关于hasLayout的一篇博文《On having layout》（中译版本《[译文]On having layout》），在作者谈及到块元素display设置为inline的时候，它的性质就跟行内元素十分相似了。由此想到了文本在容器里垂直局中的问题，所以就测试了一番。 不测不知道，一测还真学了一套。 第一种情况是：如果文本只是单行的话，这个就简单，直接设置元素的line-height css规则的高度跟height一样就ok了。下面的测试code在每个浏览器都显示正常。 [html] <style type="text/css"> div{ width:400px; height:200px; line-height:200px; border:1px solid #ccc; } </style> … 了解更多
刚入职口碑网三个星期的时间，感觉这段时间最大的收获是在HTML、CSS的学习方面。经过一两个星期的总结，今天在编写一个栏目的HTML、CSS的时候，终于编写出了只在 Firefox调好样式，其他浏览器都兼容了，特别是Fuck IE全部现代版本都兼容了，不用修改任何一处不兼容的代码，也都没有写一个hack能实现视觉效果，小赞了一下自己，:)。记得大豆说过：“我编写的HTML页面，基本在Firefox调试好 ，其他的浏览器我基本都不用调试啦，因为我在编写的时候就知道了它在其他浏览器将会出现什么效果了。”，这或许就是大师的境界吧! 因为HTML、CSS这方面功力不足，所以一方面要求乌龙茶师傅多分配这样的一些作业或者多接一些日常任务来提高这方面的能力。N个月没有写HTML了，对HTML语意化、创建良好的HTML结构都比较模糊，经过观察内网（http: //www.koubei.com)的HTML结构，也开始使用Firefox的Firebug来查看淘宝网等等一些知名网站的HTML各模块的 HTML结构编写方式，从中也开始悟出了一些门道。 关于HTML的良好的结构性的说法网上都有很多论述，总结一点就是：根据你要展现内容的特点来使用跟内容语意相符的HTML标签。这个总结或许是片面点了吧，不过基本思路还是这样滴。:) 页面上比较常用到的模块有：导航、图文并排、列表、图文列表、列表里又细分为图文并排等等，这些都是经常需要使用到的。我在入职后刚开始写页面的时候也是碰到了很多这样的模块的HTML的编写。按照我现在的习惯方式的话，当接到一个页面的需求的时候，首先不是入手开始编写HTML，而是先从整个页面上、结构语意化的角度考虑去如何规划结构，将每个模块细分出来，在细分的过程中去归纳哪些模块或者哪些样式是可以整合为使用一个css类来编写的，细分和归纳好之后，开始入手编写每个版块的HTML结构。所以，刚开始做任务的时候，我都会在这方面花费一点点时间来审视和规划页面，这些基本工作准备好了之后，就开始编写HTMl结构啦。这样一个过程的好处在于使得我编写的HTML的结构会尽量的保持精简而又能完成视觉效果，而且还有一个好处就是可以精简你的css的编写，使得你的css代码将会非常的清晰。
实现form表单label字段和input字段的对齐设计，很多人都习惯使用table的方式，当然了，使用table方便很多，只需要设置一下align就可以实现。但是从减少代码量和良好的结构性出发，可以使用其他的方式来实现，下面我将要展示的就是其中的一种方式。 效果： 我的方式是使用div将每个label和input分组，比如： [html] <form method="post" action="#"> <div> <label for="username">User Name:</label><input type="text" id="username" class="txt" /> </div> <div> <label for="email">E-mail:</label><input type="text" … 了解更多