IE中伪类:hover的使用及BUG

: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部分:
<... 6 条评论 »

100%点击区的滑动门

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

各浏览器里默认的表单控件(form controls)

浏览器环境:

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》

... 0 条评论»

Default style sheet for HTML 4

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 [...]

... 0 条评论»

简单form标准化实例(二):语义结构

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 条评论»