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部分: <ul> <li>鼠标移过来触发我吧!<a h... 17 条评论 »

100%点击区的滑动门

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

各浏览器里默认的表单控件(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 […]

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

... 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> … </fieldset> … </form> fieldset 默认是带边框的,而... 0 条评论»