SUNThink 三思 - 前端

ime-mode:disabled css实现关闭文本框输入法

345411190@qq.com (admin) — Sat, 21 Nov 2009 14:17:53 +0800

最近客服部的MM反映：用户总是在输入电话的时候不小心开启了全角无法通过格式验证而打来电话求助。如图：

就是在后面增加了，请输入半角数字的提示效果也不会很好，因为很多用户不知道什么是全角半角，都是无意中开启了全角状态。我们在平时填写表单的时候也会这样，上个文本框是输入中文，到下个要输入英文，就要来回切换输入法，极容易出现全角验证不通过，还很麻烦。

路人甲：用js全角转半角不就可以了？

这个当然可以，不过其实用css就可以了：ime-mode:disabled。在群里问了一下很多人都不用这个css属性，测试了下其实挺好用的（省去了用户切换输入法的麻烦还规避了用户容易输错数字的错误，不用白不用），看一个简单的例子：

ime-mode:disabled css实现关闭文本框输入法

附：苏昱css手册中对此属性的解释：

ime-mode

语法：

ime-mode : auto | active | inactive | disabled

取值：

auto	:	默认值。不影响IME的状态。与不指定 ime-mode 属性时相同
active	:	指定所有使用IME输入的字符。即激活本地语言输入法。用户仍可以撤销激活IME
inactive	:	指定所有不使用IME输入的字符。即激活非本地语言。用户仍可以撤销激活IME
disabled	:	完全禁用IME。对于有焦点的控件(如输入框)，用户不可以激活IME

不常用却很有用的标签

345411190@qq.com (admin) — Fri, 11 Sep 2009 14:53:11 +0800

    Xhtml有很多不常用却很有用的标签。有的能事半功倍，有的能改进语义，有的则能提高易用性，
我总结了一些，总结的原则是有用而且能用，就是大多数浏览器得支持，否则就不算“上上签”了。只能望“签”兴叹又有什么用呢？
标签
    作用：标签为页面中所有链接指定默认链接地址或链接目标。有时候我们需要让首页的链接全部在新窗口中打开，我们一般会这样写链接，而使用这个标签就能一下搞定了！
    属性：
        Href:链接地址
        target:目标，他的值可以是_blank,_parent,_self,_top,可以在除Strict模式下使用，这个用法我最先是在163.com上发现的。
    用法：
[CODE=html]

[/CODE]
标签
    作用：caption标签用来定义表格的标题，给表格定义一个标题，来说明这个表格是干什么的，岂不是很有“语义”，caption应该写在table之后，默认的样式是居中显示在表格的顶部。你可以通过css来改变它的样式。
    用法：
[CODE=html]

其实我是caption

[/CODE]
标签、标签、标签
作用：thead、tfoot 以及 tbody标签跟他们的名字那样，分别是表格的头部（很多人只是用th）、主题、和底部，他们能让表格更加语义化的同时，也能让我们更加方便的控制表格的表现。国外还有人用很变态地方法用这三个表其做出标题能跟随表格，或者tbody固定高度，多出的行数出现滚动条。有兴趣的可以搜素下或者是这做一下。
注意：如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。
用法：
[CODE=html]

科目	分数
总分	159
语文	99
数学	60

[/CODE]

标签和标签
作用：

元素用来分类表单中的元素，而则能给这个组定义一个标题。你一定见过类似下面domo的布局吧！他们也可以通过css定义样式。
    用法:
[CODE=html][/CODE]
_{标签和^标签}
    作用：_{标签和_{标签分别是上标和下标，虽然他们在各个浏览器的表现不一样，你
同样可以使用css定义他们的样式。
    用法：
[CODE=html]2^我是上标
2_我是下标[/CODE]
标签
    作用：label 标签的使用可以扩大表单的点击区域来改进表单的易用性。看看下面的用法：点击文字的时候相当于点击了单选控件，这样用户体验是不是会更好一些？
    用法：
[CODE=html]先生

女士

[/CODE]
标签
    作用：}}

彻底弄清楚haslayout概念[转]

345411190@qq.com (admin) — Wed, 19 Aug 2009 10:07:16 +0800

要想更好的理解 css，尤其是 IE 下对 css 的渲染，haslayout 是一个非常有必要彻底弄清除的概念。大多IE下的显示错误，就是源于 haslayout。

什么是 haslayout ？
haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在Internet Explorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当一个元素的 hasLayout 属性值为true时，我们说这个元素有一个布局（layout）

当一个元素有一个布局时，它负责对自己和可能的子孙元素进行尺寸计算和定位。简单来说，这意味着这个元素需要花更多的代价来维护自身和里面的内容，而不是依赖于祖先元素来完成这些工作。因此，一些元素默认会有一个布局。当我们说一个元素“拥有layout”或“得到layout”，或者说一个元素 “has layout” 的时候，我们的意思是指它的微软专有属性 hasLayout 被设为了 true 。一个“layout元素”可以是一个默认就拥有 layout 的元素或者是一个通过设置某些 CSS 属性得到 layout 的元素。如果某个HTML元素拥有 haslayout 属性，那么这个元素的 haslayout 的值一定只有 true，haslayout 为只读属性一旦被触发，就不可逆转。通过 IE Developer Toolbar 可以查看 IE 下 HTML 元素是否拥有haslayout，在 IE Developer Toolbar 下，拥有 haslayout 的元素，通常显示为“haslayout = -1”。

负责组织自身内容的元素将默认有一个布局，主要包括以下元素（不完全列表）：

* body and html
* table, tr, th, td
* img
* hr
* input, button, file, select, textarea, fieldset
* marquee
* frameset, frame, iframe
* objects, applets, embed

对于并非所有的元素都默认有布局，微软给出的主要原因是“性能和简洁”。如果所有的元素都默认有布局，会对性能和内存使用上产生有害的影响。

如何激发 haslayout？
大部分的 IE 显示错误，都可以通过激发元素的 haslayout 属性来修正。可以通过设置 css 尺寸属性(width/height)等来激发元素的 haslayout，使其“拥有布局”。如下所示，通过设置以下 css 属性即可。

* display: inline-block
* height: (任何值除了auto)
* float: (left 或 right)
* position: absolute
* width: (任何值除了auto)
* writing-mode: tb-rl
* zoom: (除 normal 外任意值)

Internet Explorer 7 还有一些额外的属性(不完全列表):

* min-height: (任意值)
* max-height: (除 none 外任意值)
* min-width: (任意值)
* max-width: (除 none 外任意值)
* overflow: (除 visible 外任意值)
* overflow-x: (除 visible 外任意值)
* overflow-y: (除 visible 外任意值)
* position: fixed

其中 overflow-x 和 overflow-y 是 css3 盒模型中的属性，目前还未被浏览器广泛支持。

对于内联元素(默认即为内联的元素，如 span，或 display:inline; 的元素)，

width 和 height 只在 IE5.x 下和 IE6 或更新版本的 quirks 模式下触发 hasLayout 。而对于 IE6，如果浏览器运行于标准兼容模式下，内联元素会忽略 width 或 height 属性，所以设置 width 或 height 不能在此种情况下令该元素具有 layout。
zoom 总是可以触发 hasLayout，但是在 IE5.0 中不支持。
具有“layout” 的元素如果同时 display: inline ，那么它的行为就和标准中所说的 inline-block 很类似了：在段落中和普通文字一样在水平方向和连续排列，受 vertical-align 影响，并且大小可以根据内容自适应调整。这也可以解释为什么单单在 IE/Win 中内联元素可以包含块级元素而少出问题，因为在别的浏览器中 display: inline 就是内联，不像 IE/Win 一旦内联元素拥有 layout 还会变成 inline-block。

haslayout 问题的调试与解决
当网页在 IE 中有异常表现时，可以尝试激发 haslayout 来看看是不是问题所在。常用的方法是给某元素 css 设定 zoom:1 。使用 zoom:1 是因为大多数情况下，它能在不影响现有环境的条件下激发元素的 haslayout。而一旦问题消失，那基本上就可以判断是 haslayout 的原因。然后就可以通过设定相应的 css 属性来对这个问题进行修正了。建议首先要考虑的是设定元素的 width/height 属性，其次再考虑其他属性。

对 IE6 及更早版本来说，常用的方法被称为霍莉破解(Holly hack)，即设定这个元素的高度为 1% (height:1%;)。需要注意的是，当这个元素的 overflow 属性被设置为 visible 时，这个方法就失效了。或者使用 IE 的条件注释。

对 IE7 来说，最好的方法时设置元素的最小高度为 0 (min-height:0;)。

haslayout 问题引起的常见 bug
IE6 及更低版本的双空白边浮动 bug
bug 修复: display:inline;

IE5-6/win 的 3 像素偏移 bug
bug 修复: _height:1%;

E6 的躲躲猫(peek-a-boo) bug
bug 修复: _height:1%;

原文地址：http://www.iwanna.cn/archives/2009/08/18/2165/

HTML4默认样式

345411190@qq.com (admin) — Mon, 17 Aug 2009 14:26:24 +0800

这是w3c组织给出html4的样式建议，可惜浏览器们都加上自己的私有属性，让标准成了浮云。不过对于我们仍然是很有参考意义的。
Appendix D. Default style sheet for HTML 4
This appendix is informative, not normative.

This style sheet describes the typical formatting of all HTML 4 ([HTML4]) elements based on extensive research into current UA practice. Developers are encouraged to use it as a default style sheet in their implementations.

The full presentation of some HTML elements cannot be expressed in CSS 2.1, including replaced elements ("img", "object"), scripting elements ("script", "applet"), form control elements, and frame elements.

For other elements, the legacy presentation can be described in CSS but the solution removes the element. For example, the FONT element can be replaced by attaching CSS declarations to other elements (e.g., DIV). Likewise, legacy presentation of presentational attributes (e.g., the "border" attribute on TABLE) can be described in CSS, but the markup in the source document must be changed.

[CODE=css]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 }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }
th { font-weight: bolder; text-align: center }
caption { text-align: center }
body { margin: 8px }
h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu { margin: 1.12em 0 }
h5 { font-size: .83em; margin: 1.5em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong { font-weight: bolder }
blockquote { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address { font-style: italic }
pre, tt, code,
kbd, samp { font-family: monospace }
pre { white-space: pre }
button, textarea,
input, select { display: inline-block }
big { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub { vertical-align: sub }
sup { vertical-align: super }
table { border-spacing: 2px; }
thead, tbody,
tfoot { vertical-align: middle }
td, th, tr { vertical-align: inherit }
s, strike, del { text-decoration: line-through }
hr { border: 1px inset }
ol, ul, dir,
menu, dd { margin-left: 40px }
ol { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol { margin-top: 0; margin-bottom: 0 }
u, ins { text-decoration: underline }
br:before { content: "\A"; white-space: pre-line }
center { text-align: center }
:link, :visited { text-decoration: underline }
:focus { outline: thin dotted invert }

/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override }

*[DIR="ltr"] { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"] { direction: rtl; unicode-bidi: embed }

@media print {
h1 { page-break-before: always }
h1, h2, h3,
h4, h5, h6 { page-break-after: avoid }
ul, ol, dl { page-break-before: avoid }
}[/CODE]

Appendix D. Default style sheet for HTML 4

ie6的默认样式

345411190@qq.com (admin) — Mon, 17 Aug 2009 14:20:50 +0800

这其实不是ie官方的文档，好像是别人经过实践搞出来的ie6的默认样式，这个对我们驯服ie6很有参考价值。你会从根本理解ie出现的那些bug的原因。不过可惜ie不像firefox哪样通过在地址栏输入命令来直接查看firefox的默认样式。
[CODE=css]=======================================
INTERNET EXPLORER 6 DEFAULT STYLE SHEET
=======================================

****** HYPOTHETICAL *******************

This is a work in progress.
Values are purely indicative.
For any suggestion or addenda,
please
contact me.

[Back to CSS Test]

================================

/* Standard HTML elements
============================

Compare with the default style sheet
for HTML 4 (local copy).
These values may be affected by the
hasLayout property.
We will not take in account
the frame and frameset elements.
The table elements are not reviewed, due to
the lack of support for the corresponding
'display' values. */
The uncertain values are marked with '<' and '>'.

/* Block-level elements */

html, body,
div, p,
blockquote,
ul, ol, dl,
dt, dd, address,
form, fieldset,
frame, frameset,
h1, h2, h3, h4,
h5, h6, hr, pre {display: block;}

head {display: none;}

html {margin: 0;}

body {margin: 8px;}

div {margin: 0;}

p {margin: 1em 0;}

blockquote {margin: 1em 40px;}

ul {margin: 1em 0 1em 40px; list-style-type: disc;}

li {display: list-item;}

ol {margin: 1em 0 1em 40px; list-style-type: decimal;}

ul ul {margin: 0 0 0 40px; list-style-type: circle;}

ul ul ul {margin: 0 0 0 40px; list-style-type: square;}

dl {margin: 1em 0;}
dd {margin-left: 40px;}

address {margin: 1em 0; font-style: italic;}

form, fieldset {margin: 0;}

fieldset {border: 1px inset ;}

h1, h2, h3, h4, h5, h6 {font-weight: bold;}

/* the following font size and vertical values are purely indicative,
since they depend on the font size/family set on the
BODY element */

h1 {font-size: 2em; margin: .6em 0;}
h2 {font-size: 1.5em; margin: .8em 0;}
h3 {font-size: 1.1em; margin: 1em 0; }
h4 {font-size: 1em; margin: 1.3em 0;}
h5 {font-size: 0.8em; margin: 1.6em 0;}
h6 {font-size: 0.6em; margin: 2.3em 0;}

hr {border: 2px outset ;}

pre {margin: 1em 0; font-family: monospace; white-space: pre;}

/* Inline elements */

a, i, cite, em, var, acronym,
tt, code, kdb, samp, del, ins,
u, dfn, sub, sup, big, small {display: inline; }

a:link {color: blue; text-decoration: underline; }
a:visited {color: purple; text-decoration: underline;}

i, cite, em, var {font-style: italic;}

tt, code, kbd, samp {font-family: monospace;}

del {text-decoration: line-through;}
u, ins {text-decoration: underline;}

sub {
vertical-align: sub;
font-size: smaller;
line-height: ;
} /* greater than 'normal' */

sup {
vertical-align: super;
font-size: smaller;
line-height: ;
} /* less than 'normal' */

big {font-size: larger;}

small {font-size: smaller;}

/* Replaced elements */

/* We will take in account only INPUT and TEXTAREA */

input, textarea {display: inline-block;}[/CODE]

IE6默认样式表(INTERNET EXPLORER 6 DEFAULT STYLE SHEET)

Firefox的默认样式

345411190@qq.com (admin) — Mon, 17 Aug 2009 14:01:43 +0800

虽然w3c制订了html的一些标准：浏览器们都会按照自己预定义的样式来解析渲染网页中的标签，firefox可以通过在地址栏里输入resource://gre/res/html.css的命令来得到firefox的默认样式表。要是ie也有这个命令该多好！你也可以在不同版本的firefox地址栏输入这个命令，这样就可以对比firefox不同版本的差异，这让我们在Reset CSS的时候有了重要的参考。
[CODE=css]/* ***** BEGIN LICENSE BLOCK *****
* Version: MPL 1.1/GPL 2.0/LGPL 2.1
*
* The contents of this file are subject to the Mozilla Public License Version
* 1.1 (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
* http://www.mozilla.org/MPL/
*
* Software distributed under the License is distributed on an "AS IS" basis,
* WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
* for the specific language governing rights and limitations under the
* License.
*
* The Original Code is mozilla.org code.
*
* The Initial Developer of the Original Code is
* Netscape Communications Corporation.
* Portions created by the Initial Developer are Copyright (C) 1998
* the Initial Developer. All Rights Reserved.
*
* Contributor(s):
* Blake Ross
*
* Alternatively, the contents of this file may be used under the terms of
* either of the GNU General Public License Version 2 or later (the "GPL"),
* or the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
* in which case the provisions of the GPL or the LGPL are applicable instead
* of those above. If you wish to allow use of your version of this file only
* under the terms of either the GPL or the LGPL, and not to allow others to
* use your version of this file under the terms of the MPL, indicate your
* decision by deleting the provisions above and replace them with the notice
* and other provisions required by the GPL or the LGPL. If you do not delete
* the provisions above, a recipient may use your version of this file under
* the terms of any one of the MPL, the GPL or the LGPL.
*
* ***** END LICENSE BLOCK ***** */

@namespace url(http://www.w3.org/1999/xhtml); /* set default namespace to HTML */

/* bidi */

[dir="rtl"] {
direction: rtl;
unicode-bidi: embed;
}
[dir="ltr"] {
direction: ltr;
unicode-bidi: embed;
}
bdo[dir] {
unicode-bidi: bidi-override;
}

/* blocks */

html, div, map, dt, isindex, form {
display: block;
}

body {
display: block;
margin: 8px;
}

p, dl, multicol {
display: block;
margin: 1em 0;
}

dd {
display: block;
-moz-margin-start: 40px;
}

blockquote {
display: block;
margin: 1em 40px;
}

address {
display: block;
font-style: italic;
}

center {
display: block;
text-align: -moz-center;
}

blockquote[type=cite] {
display: block;
margin: 1em 0px;
-moz-padding-start: 1em;
-moz-border-start: solid;
border-color: blue;
border-width: thin;
}

span[_moz_quote=true] {
color: blue;
}

pre[_moz_quote=true] {
color: blue;
}

h1 {
display: block;
font-size: 2em;
font-weight: bold;
margin: .67em 0;
}

h2 {
display: block;
font-size: 1.5em;
font-weight: bold;
margin: .83em 0;
}

h3 {
display: block;
font-size: 1.17em;
font-weight: bold;
margin: 1em 0;
}

h4 {
display: block;
font-weight: bold;
margin: 1.33em 0;
}

h5 {
display: block;
font-size: 0.83em;
font-weight: bold;
margin: 1.67em 0;
}

h6 {
display: block;
font-size: 0.67em;
font-weight: bold;
margin: 2.33em 0;
}

listing {
display: block;
font-family: -moz-fixed;
font-size: medium;
white-space: pre;
margin: 1em 0;
}

xmp, pre, plaintext {
display: block;
font-family: -moz-fixed;
white-space: pre;
margin: 1em 0;
}

/* tables */

table {
display: table;
border-spacing: 2px;
border-collapse: separate;
margin-top: 0;
margin-bottom: 0;
/* XXXldb do we want this if we're border-collapse:collapse ? */
-moz-box-sizing: border-box;
text-indent: 0;
}

table[align="left"] {
float: left;
}

table[align="right"] {
float: right;
text-align: start;
}

table[rules]:not([rules="none"]) {
border-collapse: collapse;
}

/* caption inherits from table not table-outer */
caption {
display: table-caption;
text-align: center;
-moz-box-sizing: border-box;
}

table[align="center"] > caption {
margin-left: auto;
margin-right: auto;
}

table[align="center"] > caption[align="left"] {
margin-right: 0;
}

table[align="center"] > caption[align="right"] {
margin-left: 0;
}

tr {
display: table-row;
vertical-align: inherit;
}

col {
display: table-column;
}

colgroup {
display: table-column-group;
}

tbody {
display: table-row-group;
vertical-align: middle;
}

thead {
display: table-header-group;
vertical-align: middle;
}

tfoot {
display: table-footer-group;
vertical-align: middle;
}

/* for XHTML tables without tbody */
table > tr {
vertical-align: middle;
}

td {
display: table-cell;
vertical-align: inherit;
text-align: inherit;
padding: 1px;
}

th {
display: table-cell;
vertical-align: inherit;
font-weight: bold;
padding: 1px;
}

tr > form:-moz-is-html, tbody > form:-moz-is-html,
thead > form:-moz-is-html, tfoot > form:-moz-is-html,
table > form:-moz-is-html {
/* Important: don't show these forms in HTML */
display: none !important;
}

/* inlines */

q:before {
content: open-quote;
}

q:after {
content: close-quote;
}

b, strong {
font-weight: bolder;
}

i, cite, em, var, dfn {
font-style: italic;
}

tt, code, kbd, samp {
font-family: -moz-fixed;
}

u, ins {
text-decoration: underline;
}

s, strike, del {
text-decoration: line-through;
}

blink {
text-decoration: blink;
}

big {
font-size: larger;
}

small {
font-size: smaller;
}

sub {
vertical-align: sub;
font-size: smaller;
line-height: normal;
}

sup {
vertical-align: super;
font-size: smaller;
line-height: normal;
}

nobr {
white-space: nowrap;
}

/* titles */
abbr[title], acronym[title] {
border-bottom: dotted 1px;
}

/* lists */

ul, menu, dir {
display: block;
list-style-type: disc;
margin: 1em 0;
-moz-padding-start: 40px;
}

ol {
display: block;
list-style-type: decimal;
margin: 1em 0;
-moz-padding-start: 40px;
}

li {
display: list-item;
}

/* nested lists have no top/bottom margins */
ul ul, ul ol, ul dir, ul menu, ul dl,
ol ul, ol ol, ol dir, ol menu, ol dl,
dir ul, dir ol, dir dir, dir menu, dir dl,
menu ul, menu ol, menu dir, menu menu, menu dl,
dl ul, dl ol, dl dir, dl menu, dl dl {
margin-top: 0;
margin-bottom: 0;
}

/* 2 deep unordered lists use a circle */
ol ul, ul ul, menu ul, dir ul,
ol menu, ul menu, menu menu, dir menu,
ol dir, ul dir, menu dir, dir dir {
list-style-type: circle;
}

/* 3 deep (or more) unordered lists use a square */
ol ol ul, ol ul ul, ol menu ul, ol dir ul,
ol ol menu, ol ul menu, ol menu menu, ol dir menu,
ol ol dir, ol ul dir, ol menu dir, ol dir dir,
ul ol ul, ul ul ul, ul menu ul, ul dir ul,
ul ol menu, ul ul menu, ul menu menu, ul dir menu,
ul ol dir, ul ul dir, ul menu dir, ul dir dir,
menu ol ul, menu ul ul, menu menu ul, menu dir ul,
menu ol menu, menu ul menu, menu menu menu, menu dir menu,
menu ol dir, menu ul dir, menu menu dir, menu dir dir,
dir ol ul, dir ul ul, dir menu ul, dir dir ul,
dir ol menu, dir ul menu, dir menu menu, dir dir menu,
dir ol dir, dir ul dir, dir menu dir, dir dir dir {
list-style-type: square;
}

/* leafs */

/*

noshade and color attributes are handled completely by
* the nsHTMLHRElement attribute mapping code
*/
hr {
display: block;
height: 2px;
border: 1px inset;
margin: 0.5em auto 0.5em auto;
color: gray;
-moz-float-edge: margin-box;
-moz-box-sizing: border-box;
}

hr[size="1"] {
border-style: solid none none none;
}

*|*:-moz-any-link img, img[usemap], object[usemap] {
border: 2px solid;
}

img:-moz-broken::before, input:-moz-broken::before,
img:-moz-user-disabled::before, input:-moz-user-disabled::before,
img:-moz-loading::before, input:-moz-loading::before,
applet:-moz-empty-except-children-with-localname(param):-moz-broken::before,
applet:-moz-empty-except-children-with-localname(param):-moz-user-disabled::before {
content: -moz-alt-content !important;
unicode-bidi: embed;
}

object:-moz-broken > *|*, applet:-moz-broken > *|*
object:-moz-user-disabled > *|*, applet:-moz-user-disabled > *|* {
/*
Inherit in the object's alignment so that if we aren't aligned explicitly
we'll end up in the right place vertically. See bug 36997. Note that this
is not !important because we _might_ be aligned explicitly.
*/
vertical-align: inherit;
}

img:-moz-suppressed, input:-moz-suppressed, object:-moz-suppressed,
embed:-moz-suppressed, applet:-moz-suppressed {
/*
Set visibility too in case the page changes display. Note that we _may_
want to just set visibility and not display, in general, if we find that
display:none breaks too many layouts. And if we decide we really do want
people to be able to right-click blocked images, etc, we need to set
neither one, and hack the painting code.... :(
*/
display: none !important;
visibility: hidden !important;
}

img[usemap], object[usemap] {
color: blue;
}

frameset {
display: block ! important;
overflow: -moz-hidden-unscrollable;
position: static ! important;
float: none ! important;
border: none ! important;
}

frame {
border: none ! important;
}

iframe {
border: 2px inset;
}

noframes {
display: none;
}

spacer {
position: static ! important;
float: none ! important;
}

canvas {
-moz-user-select: none;
}

/* focusable content: anything w/ tabindex >=0 is focusable */
abbr:focus, acronym:focus, address:focus, applet:focus, b:focus,
base:focus, big:focus, blockquote:focus, br:focus, canvas:focus, caption:focus,
center:focus, cite:focus, code:focus, col:focus, colgroup:focus, dd:focus,
del:focus, dfn:focus, dir:focus, div:focus, dl:focus, dt:focus, em:focus,
fieldset:focus, font:focus, form:focus, h1:focus, h2:focus, h3:focus, h4:focus,
h5:focus, h6:focus, hr:focus, i:focus, img:focus, ins:focus,
kbd:focus, label:focus, legend:focus, li:focus, link:focus, menu:focus,
object:focus, ol:focus, p:focus, pre:focus, q:focus, s:focus, samp:focus,
small:focus, span:focus, strike:focus, strong:focus, sub:focus, sup:focus,
table:focus, tbody:focus, td:focus, tfoot:focus, th:focus, thead:focus,
tr:focus, tt:focus, u:focus, ul:focus, var:focus {
/* Don't specify the outline-color, we should always use initial value. */
outline: 1px dotted;
}

/* hidden elements */
area, base, basefont, head, meta, script, style, title,
noembed, param {
display: none;
}

/* emulation of non-standard HTML tag */
marquee {
width: -moz-available;
display: inline-block;
vertical-align: text-bottom;
text-align: start;
-moz-binding: url('chrome://xbl-marquee/content/xbl-marquee.xml#marquee-horizontal');
}

marquee[direction="up"], marquee[direction="down"] {
-moz-binding: url('chrome://xbl-marquee/content/xbl-marquee.xml#marquee-vertical');
height: 200px;
}

/* PRINT ONLY rules follow */
@media print {

marquee { -moz-binding: none; }

/* XXX this should not be necessary, we should be stopping blinking
of any kind in print preview, not just the element */
blink {
text-decoration: none;
}

}[/CODE]