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

在使用 CSS 实现表现的时候，会经常接触到 display:inline-block 这一属性，无论是初接触 Web 标准还是接触标准已久的朋友，大都会对这一属性感觉很迷惑和模糊。
display:inline-block
将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。
但对于这个属性不是所有浏览器都识别。
支持的浏览器有：Opera、Safari。
但很遗憾，最流行的 IE 和 Firefox 却不支持这个属性（在 Firefox3 版本中将会支持 display:inline-block）。不过 Firefox 下却有私有属性 -moz-inline-box 和inline-block 形似，为什么是“形似”而不是“神似”呢？这是因为使用 -moz-inline-box 会带来很多意想不到的后遗症，比如使用这一属性后，text-align 有时候就会有问题，还得改用 Firefox 的私有属性 -moz-box-align 来解决（谢谢 aoao 提供案例... 30 条评论 »

表达方式：+property:value
测试环境：IE5，IE6 ，IE7，FF1.5，FF2.0，Opera 9，Safari 2
测试结果：IE5，IE6 ，IE7浏览器识别；FF2.0，Opera 9，Safari 2浏览器不识别。
结论：我们可以用”+”来实现只有 IE 识别的 CSS Hack。
比如我们要实现在 IE 中 480px 的宽度，而在其他浏览器 500px 的宽度，就可以通过 “+” Hack 来完成，如下：
#hack {
width:500px;
+width:480px; /*only IE*/
}
这应该归结于IE对一些特殊字符的识别，大家还可以测试其他的特殊字符如：” >”,”-”,”@”……或许有更多的收获。
PS：可能有朋友想到 “_” Hack ，但它们是由区别的，因为IE7中是不识别“_”的。
扩展阅读：《Internet Explorer 7 CSS hacks》

有朋友问：不明白为什么有了 DOCTYPE 还要 namespace，他俩不是一个作用么？
其实不然，先让我们看看网上对它们的定义：
什么是 DOCTYPE？
DOCTYPE 是 document type (文档类型)的简写，用来说明你用的 XHTML 或者 HTML 是什么版本。其中的 DTD 叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的 DTD 来解释你页面的标识，并展现出来。
要建立符合标准的网页，DOCTYPE 声明是必不可少的关键组成部分；除非你的 XHTML 确定了一个正确的 DOCTYPE，否则你的标识和 CSS 都不会生效。
什么是namespace？
由于 XML 允许你自己定义自己的标识，你定义的标识和其他人定义的标识有可能相同，但表示不同的意义。当文件交换或者共享的时候就容易产生错误。为了避免这种错误发生，XML 采用名字空间声明，允许你通过一个网址指向来识别... 0 条评论»

裁切 BUG（Guillotine Bug）现象：浮动元素内某些连接 hover 时，该元素的底部会被砍掉。
详细介绍：http://www.positioniseverything.net/explorer/guillotine.html
触发条件：

一个容器元素；
在容器内有一个没有被清楚浮动的浮动元素；
非浮动的内容在浮动元素之后，并且容器内包含链接；
那些链接的a:hover样式改变某些属性；
只出现在IE浏览器。

:hover 是我们在 CSS 设计中最常运用的伪类之一，许多绚丽效果的实现离不开伪类 :hover，比如我们常见的纯 CSS 菜单、相册效果等等。
或许用了这么久的伪类 :hover，还有部分朋友还不完全了解 hover 的规则：
在 CSS1 中此伪类仅可用于 a 对象。且对于无 href 属性（特性）的 a 对象，此伪类不发生作用。
在 CSS2 中此伪类可以应用于任何对象。
但目前 IE5.5、IE6 仅支持 CSS1 中的 :hover，不过新出的 IE7 是支持 CSS2 中的 :hover。
当我们用伪类 :hover 做某些特殊效果时，依据 CSS2 很好完成，但为了现在占据主流浏览器的 IE6 ，我们又不得不做很多工作，比如给添加a元素等来模拟完成最终的效果。
或许这样讲太空洞，请看下面一个常见的触发显示的例子（仅选择IE6为例讲解）。
我们先用 CSS2 的写法来实现：
XHTML部分：
<... 12 条评论 »

学习标准的朋友，一般都会在学习的过程中接触到CSS滑动门技术，或许大家也都看过这篇文章《CSS中的滑动门技术》，如果你还没接触过或还没看过上文或有点忘记内容，也没关系，可以点击上面的文章链接，先了解或温习一遍。
在《CSS中的滑动门技术》一文中的滑动门例子，大家仔细实验，或许已经发现，链接区有9像素的盲点无法点击，而且在IE下，只能点击文字部分大小，不能点击整个按钮区块。而我们或许期望的是整个按钮区块都可以点击，并且不允许有盲点存在。
那我们又该如何去实现呢？下面我们一起来探讨一些解决方法：
首先为了方便我们先把《CSS中的滑动门技术》中的代码移过来：
XHTML部分：
<div id=”header”>
<ul>
<li><a href=”#”>Home</a></li>
<li id=&#... 2 条评论 »

浏览器环境：

Camino
Firefox 1.0 PR Mac
Firefox 1.0 PR Win
IE 5 Mac
IE 6 Win
Opera 7.53 Mac
Opera 7.53 Win
Safari

表单控件：

Buttons
Submit buttons
Select boxes, single
Select boxes, multiple
Single line text inputs
Multi-line text inputs
Checkboxes
Radio buttons
File select controls

Buttons

Submit buttons

Select boxes, single

Select boxes, multiple

Single line text inputs

Multi-line text inputs

Checkboxes

Radio buttons

File select controls

更多请阅读：《Styling even more form controls》

html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre { display: block }
li { display: list-item }
head { display: none }
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group [...]

1、使用 fieldset 和 legend标签
在 form 中，我们经常会对 form 中的信息进行分组，比如注册 form ，我们可能会将注册信息分组成基本信息（一般为必填），详细信息（一般为可选），那我们如何更好的来实现呢？我们可考虑在 form 中加入下面两个标签：

fieldset：对表单进行分组，一个表单可以有多个fieldset
legend：说明每组的内容描述

<form id=”demoform” class=”democss” action=”">
<fieldset>
<legend>Basic Register</legend>
<p>First name: <input type=”text” name=”fname” value=”" /></p>
…
</fieldset>
<fieldset>
<legend>Detailed Register</legend>
<p>Interest: <input type=”text” name=”interest” value=”" /></p>
…
&... 0 条评论»

form 无论是在网站的制作中，还是在网站的重构中，我们都会频繁地“碰面”，当“碰面”的次数多了，反而觉得他更让人迷茫，有种熟悉的“陌生”，越来越把握不了他。
下面我们将带大家走进 form 的世界，一起来熟悉、探讨、掌握他的“脾性”。

对于简单 form 的设计图（如图，yahoo 注册页面的一部分），我们如何来做整体的布局呢？大体我们可以选用以下 3 种方式来做布局：
1、使用 table 来布局
这是大家最常用的方法，虽然现在到处都在谈标准化，甚至更多的在说 div+css ，但怿飞还是推荐使用 table 来布局 form。对于标准，个人的另类理解“更符合逻辑，更效率快捷”。
为什么推荐大家使用呢？table 本就是用来显示二维数据，用 table 来布局 form 可以说是他的“老本行”。另外重要的一点是，对于复杂的 form ，table 能... 2 条评论 »