form checkbox & radio 解决方案

form checkbox & radio

checkbox & radio 的对齐一直是个问题,不仅不同浏览器不同,不同的字体,不同的文字大小也会表现不一样,相信纠结了一大批人,如果没有好好整理总结下得出一个经验,相信每次碰到这个鬼东西都是比较纠结的,很头疼啊。

重置 form checkbox & radio

因为不同浏览器解析不一样,有些是默认margin,有些是默认padding,还有ie6,7连margin和padding即使设置为0后,所占的空间还是比较大,所以还是有必须重置下,这样就能解决很多不必要的麻烦。

以下是 14px Arial 字体的解决方案

CSS Code:

.form { font: 14px/18px Arial, Helvetica, sans-serif; }
.form input, .form label { vertical-align: middle; }
.form label { margin-right: 6px; }
.form_checkbox, .form_radio {
    margin: 0 3px 0 0;/*与右侧文字的间距*/
    padding: 0;
    width: 13px;
    height: 13px;
    /*ie7 ie6 根据不同的 font-size 设置不同的值*/
    *vertical-align: 1px;
}

HTML Code:

<form name="form1" method="post" action="" class="form">
  <p>
    <input type="checkbox" name="checkbox4" id="checkbox4" class="form_checkbox">
    <label for="checkbox4">checkbox4</label>
    <input type="checkbox" name="checkbox5" id="checkbox5" class="form_checkbox">
    <label for="checkbox5">checkbox5</label>
    <input type="checkbox" name="checkbox6" id="checkbox6" class="form_checkbox">
    <label for="checkbox6">checkbox6</label>
  </p>
  <p>
    <input type="radio" name="radio" id="radio4" value="radio4" class="form_radio">
    <label for="radio4">radio4</label>
    <input type="radio" name="radio" id="radio5" value="radio5" class="form_radio">
    <label for="radio5">radio5</label>
    <input type="radio" name="radio" id="radio6" value="radio6" class="form_radio">
    <label for="radio6">radio6</label>
  </p>
</form>

更多Demo

兼容 IE input button 左右内边距的增加

IE 下的按钮标签(input、button)会随着文字的增加导致文本左右两侧的间距越来越大。该问题存在于 IE6/IE7,IE8~IE10 没发现类似问题。一般情况下,只要给按钮标签设置 overflow 属性的 visible 值,按钮就可以在 IE 下显示正常了。

HTML Code:

<input type="button" value="ie respects my padding" />

CSS Code:

padding: 10px;
overflow: visible;

HTML5 语义标签

在 HTML5 出来之前,我们用 div 来表示页面章节,但是这些 div 都没有实际意义。(即使我们用 css 样式的 id 和 class 来形容这块内容的意义)。这些标签只是我们提供给浏览器的指令,只是定义一个网页的某些部分。但现在,那些之前没“意义”的标签因为 html5 的出现而消失了,这就是我们平时所说的“语义”。

html5-layout

如上图那个页面结构没有使用一个 div,都是采用 html5 语义标签(用哪些标签,关键取决于你的设计目标)。

但是也不要因为 html5 新标签的出现,而随意用之,错误的使用肯定会事与愿违。所以有些地方还是要用 div 的,就是因为 div 没有任何意义的元素,他只是一个标签,仅仅是用来构建外观和结构。因此是最适合做容器的标签。

W3C 定义了这些语义标签,不可能完全符合我们有时的设计目标,就像制定出来的法律不可能流传 100 年都不改变,更何况它才制定没多久,不可能这些语义标签对所以设计目标的适应。只是一定程度上的“通用”,我们的目标是让爬虫读懂重要的东西就够了。

结论:不能因为有了 HTML5 标签就弃用了 div,每个事物都有它独有的作用。

header 元素

header 元素代表“网页”或“section”的页眉;

通常包含 h1-h6 元素或 hgroup,作为整个页面或者一个内容块的标题,也可以包裹一个目录部分,一个搜索框,一个 nav,或者任何相关 logo;

整个页面没有限制 header 元素的个数,可以拥有多个,可以为每个内容块增加一个 header 元素;

header 示例代码:

<header>

  <hgroup>
    <h1>网站标题</h1>
    <h2>网站副标题</h2>
  </hgroup>

</header>

header 使用注意:

  1. 可以是“网页”或任意“section”的头部部分;
  2. 没有个数限制;
  3. 如果 hgroup 或 h1-h6 自己就能工作的很好,那就不要用 header;

section 元素

section 元素代表文档中的“节”或“段”,“段”可以是指一篇文章里按照主题的分段;“节”可以是指一个页面里的分组;

section 通常还带标题,虽然 html5 中 section 会自动给标题 h1-h6 降级,但是最好手动给他们降级;

section 示例代码:

<section>

  <h1>什么是 section</h1>

  <article>

    <h2>关于 section</h2>
    <p>section 的介绍</p>

    <section>
      <h3>关于其他</h3>
      <p>关于其他 section 的介绍</p>
    </section>

  </article>

</section>

section 使用注意:

  1. 表示文档中的节或者段;
  2. article、nav、aside 可以理解为特殊的 section,所以如果可以用 article、nav、aside 就不要用 section,没实际意义的就用 div;

article 元素

article 元素最容易跟 section 和 div 容易混淆,其实 article 代表一个文档、页面或者网站中自成一体的内容,其目的是为了让开发者独立开发或重用。譬如论坛的帖子,博客上的文章,一篇用户的评论,一个互动的 widget 小工具。(特殊的 section)

除了它的内容,article 会有一个标题(通常会在 header 里),会有一个 footer 页脚。我们举几个例子介绍一下 article,好更好区分 article、section、div;

一篇简单文章的 article 示例代码:

<article>

  <header>
    <h1>文章标题</h1>
  </header>

  <p>文章内容..</p>

  <footer>
    <p>版权:cssue.com</p>
  </footer>

</article>

上例是最简单的 article 标签使用情况,如果在 article 内部再嵌套 article,那就代表内嵌的 article 是与它外部的内容有关联的,如博客文章下面的评论;

文章里的评论,一个 article 里嵌套 article 的示例代码:

<article>

  <header>
    <h1>文章标题</h1>
    <time datetime="2012-12-06">2012/12/06</time>
  </header>

  <p>文章内容..</p>

  <article>

    <h2>评论</h2>

    <article>
      <header>
        <h3>评论者: XXX</h3>
        <time datetime="2012-12-06T19:10">~1 hour ago</time>
      </header>
      <p>娃哈哈..</p>
    </article>

    <article>
      <header>
        <h3>评论者: XXX</h3>
        <time datetime="2012-12-06T19:10">~1 hour ago</time>
      </header>
      <p>哈哈哈哈...</p>
    </article>

  </article>

</article>

article 内部嵌套 article,有可能是评论或其他跟文章有关联的内容。那 article 内部嵌套 section 一般是什么情况呢。如下:

文章里的章节,一个 article 里嵌套 section 的示例代码:

<article>

  <h1>前端技术</h1>
  <p>前端技术有那些</p>

  <section>
    <h2>HTML</h2>
    <p>标签..</p>
  </section>

  <section>
    <h2>CSS</h2>
    <p>样式..</p>
  </section>

  <section>
    <h2>JS</h2>
    <p>脚本..</p>
  </section>

</article>

因为文章内 section 部分虽然也是独立的部分,但是它门只能算是组成整体的一部分,从属关系,article 是大主体,section 是构成这个大主体的一部分。本网站的全部文章都是 article 嵌套一个个 section 章节,这样能让浏览器更容易区分各个章节所包括的内容。

那 section 内部嵌套 article 又有哪些情况呢,如下:

一个 section 里嵌套 article 的示例代码:

<section>

  <h1>介绍网站制作成员配备</h1>

  <article>
    <h2>设计师</h2>
    <p>设计网页的...</p>
  </article>

  <article>
    <h2>程序员</h2>
    <p>编写程序的..</p>
  </article>

  <article>
    <h2>前端工程师</h2>
    <p>给楼上两位打杂的..</p>
  </article>

</section>

设计师、程序员、前端工程师都是一个独立的整体,他们组成了网站制作基本配备,当然还有其他成员~~。设计师、程序员、前端工程师就像 article,是一个个独立的整体,而 section 将这些自成一体的 article 包裹,就组成了一个团体。

article 和 section 的例子就例举这么多了,具体情况具体分析,不易深究。漏了 div,其实 div 就是只是想用来把元素组合或者给它们加样式时使用。

article 使用注意:

  1. 自身独立的情况下:使用 article;
  2. 是相关内容:使用 section;
  3. 没有语义的:使用 div;

nav 元素

nav 元素代表页面的导航链接区域。用于定义页面的主要导航部分。

nav 示例代码:

<nav>
  <ul>
    <li>HTML5</li>
    <li>CSS3</li>
    <li>JavaScript</li>
  </ul>
</nav>

但是我在有些时候却情不自禁的想用它,譬如:侧边栏上的目录,面包屑导航,或者上一篇下一篇文章,但是事实上规范上说 nav 只能用在页面主要导航部分上。页脚区域中的链接列表,虽然指向不同网站的不同区域,譬如服务条款,版权页等,这些 footer 元素就能够用了。

nav 使用注意:

  1. 用在整个页面的主要导航部分上,不合适就不要用 nav 元素;

aside 元素

aside 元素标签用来表示当前页面或文章的附属信息部分,可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav 元素组,以及其他类似的有别与主要内容的部分。

<article>

  <h1>前端技术</h1>
  <p>前端技术包括:HTML、CSS、JavaScript等...</p>

  <aside>
    <dl>
      <dt>HTML</dt>
      <dd>HTML 是用于描述网页文档的一种超文本标记语言。</dd>
    </dl>
  </aside>

</article>

aside 使用注意:

  1. 被包含在 article 元素中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的引用、词汇列表等。
  2. 在 article 之外使用,作为页面或站点全局的附属信息部分;最典型的形式是侧边栏(sidebar),其中的内容可以是友情链接、附属导航或广告单元等。

footer 元素

footer 元素代表“网页”或“section”的页脚,通常含有该节的一些基本信息,譬如:作者,相关文档链接,版权资料。如果 footer 元素包含了整个节,那么它们就代表附录,索引,提拔,许可协议,标签,类别等一些其他类似信息。

footer 示例代码:

<footer>
  <p>版权:cssue.com</p>
</footer>

footer 使用注意:

  1. 可以是“网页”或任意“section”的底部部分;
  2. 没有个数限制,除了包裹的内容不一样,其他跟 header 类似;

jQuery 实现单击文本框显示隐藏提示文本

这是一款挺实用的 jQuery 特效,应用于表单上十分人性化,jQuery 文本框默认文字点击隐藏的效果,当用户点击表单的时候,显示在文本框内的提示文字即刻隐藏,不点击的时候则重新出现,目前这种功能应用也十分广泛。实例代码如下:

click-hidden-prompt-text

jQuery Code:

$(document).ready(function() {
    $("#focus .input_txt").each(function() {
        var thisVal = $(this).val();
        //判断文本框的值是否为空,有值的情况就隐藏提示语,没有值就显示
        if (thisVal != "") {
            $(this).siblings("span").hide();
        } else {
            $(this).siblings("span").show();
        }
        //聚焦型文本框验证	
        $(this).focus(function() {
            $(this).siblings("span").hide();
        }).blur(function() {
            var val = $(this).val();
            if (val != "") {
                $(this).siblings("span").hide();
            } else {
                $(this).siblings("span").show();
            }
        });
    });
});

CSS 换行样式

在 CSS 里,主要有强制换行和禁止换行。

一、div 强制换行

word-break: break-all;  /* 只对英文起作用,以字母作为换行依据 */
word-wrap: break-word;  /* 只对英文起作用,以单词作为换行依据 */
white-space: pre-wrap;  /* 只对中文起作用,强制换行 */

word-break: break-all 和 word-wrap: break-word 都是能使其容器如 div 的内容自动换行,它们的区别在于:

1、word-break: break-all

假设 div 宽度为 200px,它的内容就会到 200px 自动换行,如果该行末端有个很长的英文单词,它会把单词截断,一部分保持在行尾,另一部分换到下一行。

2、word-wrap: break-word

例子与上面一样,但区别就是它会把整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉。

二、table 强制换行

table {
    table-layout: fixed;
    word-wrap: break-word;
}

table-layout: fixed; 列宽由表格宽度和列宽度设定。

三、禁止换行

white-space: nowrap;

white-space: nowrap; 文本不会换行,文本会在在同一行上继续,直到遇到 <br /> 标签为止。

IE9 的 CSS Hack

以前写过一篇 《CSS Hack》, 这只是针对 IE6、IE7 和 FF 等主流浏览器的区分,现在微软已经将 IE 升级到了 9 ,所以 CSS Hack 也该更新了。新的 Hack 方法如下:

CSS Code:

body {
    background-color: #FF0;      /* Firefox, Chrome, Safari, = */
    background-color: #F00\0;    /* ie8/9 */
    background-color: #0F0\9\0;  /* ie9 */
    *background-color: #00F;     /* ie7 */
    _background-color: #F0F0F0;  /* ie6 */
}

注意写 hack 的顺序,其中:

  1. background-color:red\0; IE8和IE9都支持;
  2. background-color:blue\9\0; 仅IE9支持;

图片垂直居中的使用技巧

使用纯 CSS 实现未知尺寸的图片(但高宽都小于200px)在 200px 的正方形容器中水平和垂直居中。

题目的难点在于两点:

  1. 垂直居中;
  2. 图片尺寸未知;

至于如何解决,下面是一个权衡的相对结构干净的 CSS 解决方法:

CSS Code:

.box {
    border: 1px solid #eee;
    /* 设置水平居中 */
    text-align: center;
    /* 非IE的主流浏览器识别的垂直居中的方法 */
    display: table-cell;
    vertical-align: middle;
    /* 针对 IE 的 Hack */
    *display: block;
    /* 防止非 utf-8 引起的 hack 失效问题,如 gbk 编码 */
    *font-family:Arial;
    /* 约为高度的 0.873, 200*0.873 约为 175 */
    *font-size: 175px;
    height: 200px;
    width: 200px;
}
.box img {
    /* 设置图片垂直居中 */
    vertical-align: middle;
}

HTML Code:

<div class="box"> 
    <img src="http://img.baidu.com/img/image/imglogo.gif" />
</div>

当然还有其他的解决方法,在此不深究,有兴趣的可以阅读下:

CSS 制作 table 细线表格

CSS Code:

table {
    /* 合并表格内外边框;其实表格边框有2px,外面1px,里面还有1px */
    border-collapse: collapse;
    /* 设置边框颜色;颜色:#888 = 灰色 */
    border-color: #888;
    /* 设置边框样式;样式:solid = 实线 */
    border-style: solid;
    /* 设置边框粗细;上 右 下 左 = 对应:1px 0 0 1px */
    border-width: 1px 0 0 1px;
}
table th, table td {
    border-color: #888;
    border-style: solid;
    border-width: 0 1px 1px 0;
    padding: 2px;
}

具有亲和力的文字隐藏方法

一个新的,更加具有亲和力的CSS隐藏文字方法介绍,来自 sonspring.com,说明为什么现有的几种CSS隐藏文字的方法的缺陷和新的方法如何弥补。实用性一般,但是这个方法挺新颖的。

1.display:none; 的缺陷

  • 搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略,来自 SEO Mistakes: Unwise comments
  • 屏幕阅读器(是为视觉上有障碍的人设计的读取屏幕内容的程序)会忽略被隐藏的文字。

2.visibility:hidden; 的缺陷

这个大家应该比较熟悉就是隐藏的内容会占据他所应该占据物理空间。

3.overflow:hidden; 一个比较合理的方法

.texthidden {
    display: block; /*统一转化为块级元素*/
    height: 0;
    overflow: hidden;
    width: 0;
}

就像上面的一段CSS所展示的方法,将宽度和高度设定为0,然后超过部分隐藏,就会弥补上述一、二方法中的缺陷,也达到了隐藏内容的目的。

专注前端,关注体验