分类“HTML/CSS/XML/XSL”所有日志

一年前网上还找不到关于 inline-block 属性的文章，为了方便大家更好的理解该属性，当时总结整理了篇《display:inline-block的深入理解》。
而现在对于 inline-block 属性运用的需求也越来越多，可惜依旧只有 Firefox3 beta、IE8 beta、Opera、Safari 支持 inline-block 属性（注：原来只有 Opera、Safari 支持），但 IE6、IE7 可以通过触发 hasLayout 来模拟，Firefox2 有-moz-inline-box 和 -moz-inline-stack 私有属性（这两个属性的比较引用自秦歌的《display:inline-block的应用两例》）。
在实际应用中 -moz-inline-box 会存在元素间的对齐等问题，虽然 Firefox 还有一个私有属性 -moz-box-align 来帮助解决对齐问题，但依旧难以预料问题多多，而相对来说 -moz-inline-stack 的表现更像 inline-block ，这点可以在 Firefox3 中测试出来。但 -moz-inline-stack 使用时也会有一个 bug ，如果一个 display:-moz-inline-... 21 条评论 »

IE 官方提供的 IE5 到 IE8 的 CSS 兼容列表：《CSS Compatibility and Internet Explorer》（小马 最新提供的信息）
很好的参考资料，可以方便帮助大家了解和熟悉各 IE 浏览器之间 CSS 的兼容情况。
个人最近一直对 MS 另眼相看，从 IE 8 Beta 1 发布的第一天起，至少我们看到 MS 的态度，积极开放，结果虽不太如人意，但至少 MS 跨出了重要的一步，放下了一向高傲的姿态 。

b 和 i 标签在现在的 Web 标准潜规则中是不推荐使用，甚至是反对使用的，因为认为他们只是“表现”粗体和斜体，而没有任何“语义”。更多的用 strong 和 em 标签代替。
而在新的 HTML5 工作草案 中对于 b 和 i 标签是这样定义的：
The b element now represents a span of text to be stylistically offset from the normal prose without conveying any extra importance, such as key words in a document abstract, product names in a review, or other spans of [...]

IE8 (下文中的 IE8 暂时仅代表IE8 beta1) 中增加了 CSS3 中的子串匹配的属性选择器（substring matching attribute selectors），具体规则与正则中的匹配很相似：

E[att^='val'] //子串以’val’ 开始
E[att$='val'] //子串以’val’ 结束
E[att*='val'] //子串中包含’val’

IE8 支持绝大多数基本的 CSS2.1 选择器：

:before and :after 被支持，只支持文本，不支持图片，但还存在bug 。
:focus 被支持。
display: inline-block 被支持（只能用于内联元素）。
display: table 被支持。
list-style 完全被支持，包括值 upper-greek （此值其他浏览器均未支持）。
outline 被支持。
border-collapse, border-spacing 和 caption-side 被支持。
white-space 完全被支持。
box-sizing 被支持，不过使用的是私有属性 -ms-box-sizing 。

不支持的包括但不限于... 16 条评论 »

//显示属性
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

1、连续的英文或数字能是容器被撑大，不能根据容器的大小自动换行。解决方法：《css之自动换行》 。连续的标点符号也不会转行，用属性 word-break:break-all; 无法达到效果，可以选用属性 word-wrap: break-word; 来解决！
2、有序列表的 li 在 IE 中，定了宽后，序号就变为1；定了浮动后，就没有了序号，Firefox 却不同。IE 认为：列表本来就不把序号算在实体内。
3、根据 CSS1，class 或 id 属性的值不能以数字 (0-9) 开头。更早版本的 Internet Explorer 允许这些值以数字开头。
4、在用 :after 方式清除浮动时，GBK 编码下切记不要在 content:””; 的引号中加任何字符，包括网上常见方式的点“.”，在opera下会产生问题。
div:after {
content:”";
display:block;
clear:both;
visibility:hidden;
height:0;
}
5、 opera 不支持 overflow... 3 条评论 »

今天在修改 淘宝 宝贝详情页面的时候，发现页面在 Firefox 下遇到这样一个问题：
链接用图片做背景，text-indent:-9999px; 隐藏文字，此效果在 IE 中是正常的，但在 Firefox 里，鼠标点击该链接时，虚线框却会包住被缩进的文字，结果显示为虚线框 N 长。（BTW: 因为平时是用 overflow:hidden; 属性的，所以一直也没有注意到这个问题的存在。）
虚线框，其实就是 CSS 中的 outline 属性，这也说明 IE 和 Firefox 对于 outline 和 border 的解析范围并不一致：IE 认为虚线框就是border的边缘，而 Firefox 则认为虚线框应该是文字范围。
那 W3C 中是如何定义 outline 的呢？
At times, style sheet authors may want to create outlines around visual objects such as buttons, active form fields, image maps, etc., [...]

有时候在一个页面用到收放功能的时候时，总有一个虚线框在触发收放的功能按钮上，显得特别刺眼，那如何去除这个虚线框呢？
虽然从可用性的角度，隐藏虚线框的做法会让键盘偏执狂不满。但从视觉上，有时候虚线框确实影响美观。
方法一：
IE 下可使用其私有的html属性：hideFoucs，在标签的结构中加入 hidefocus=”true” 属性。即：
<a href=”http://www.taobao.com” hidefocus=”true” title=”淘宝网，淘我喜欢”>淘宝网</a>
而在 Firfox 浏览器中则相对比较容易，直接给标签 a 定义样式 outline:none; 就可以了，即：
.HideFocus {
outline:none;
}
方法二：
也可以仅用 CSS 来控制，即对 IE 的情形使用 expression 表达式，但不推荐使用，毕竟 expression 在性能上有问题。
.HideFocus {
hide-focu... 5 条评论 »

今天偶然看到了一道题中有这样一段：
在不同浏览器的Quirksmode和CSSCompat模式下都保持同一效果
其实对于学习标准的人可能更多的人熟悉 Quirksmode ，也许很多人（对 JS 不太熟悉的朋友）或许要问：CSSCompat 模式是什么，我怎么没听过？其实这两种叫法是在不同的语言环境中的不同叫法。
document 有个属性 compatMode 可以用来判断当前页面采用的何种渲染方式：

BackCompat — Standards-compliant mode is not switched on.
CSS1Compat — Standards-compliant mode is switched on.

官方说明：http://msdn2.microsoft.com/en-us/library/ms533687.aspx
或许已经有朋友看出他们之间的某种对应关系：

CSS1Compat: Standards Mode
BackCompat: Quirks Mode

而所说的 CSSCompat Mode 也就是指我们平时所说的 Standards Mode 。
估计这道题目重点在考查应试者对 CSS 和 Javascript... 0 条评论»

很早在 蓝色论坛 做过一个调查《你使用的CSS命名规则 (单选) 》，调查结果如下（参与投票人数为83人）：

helloworld 2 (2.41%)
hello-world 9 (10.84%)
hello_world 52 (62.65%)
helloWorld 19 (22.89%)
HelloWorld 1 (1.20%)
其他 0 (0.00%)

从结果中可以看出使用率最好的为下划线命名法（ hello_world ），其次为骆驼式命名法（helloWorld），再次为连接符命名法（ hello-world）。而在其他语言中比较常见的帕斯卡（pascal）命名法、匈牙利命名法等在 CSS 的命名规则中则很少有人使用。
调查的最终结果并不能说明谁的对错，只是体现一种偏好。但更多人对某种的偏好，其实同时也更体现出其在某些地方的突出。仅为初学者入门提供了更好的选择。
偏好是自己的，“走自己的路，让别人去说吧”，嘿嘿……