Jan 30
ime-mode
语法：
ime-mode : auto | active | inactive | disabled
取值：
auto : 默认值。不影响IME的状态。与不指定 ime-mode 属性时相同
active : 指定所有使用IME输入的字符。即激活本地语言输入法。用户仍可以撤销激活IME
inactive : 指定所有不使用IME输入的字符。即激活非本地语言。用户仍可以撤销激活IME
disabled : 完全禁用IME。对于有焦点的控件(如输入框)，用户不可以激活IME
Jul 10
每个 Web Developer / Designer 都知道 CSS 的 position:fixed 的妙用。利用这个属性，我们可以轻松的将一个元素“固定”在页面的某个位置。这在我们做一些特殊的效果，例如页边角的小角旗，或是固定页面底下的脚注都是非常有用的。但是万恶的 IE 却对这个属性支持有问题，尽管 IE7/8 已经能够正确处理这个属性，但 IE6 的份额还是很高，所以当我们用这个属性时，还得想办法解决这个问题。
今天在一位德国朋友的博客上，看到了一个不错的通用解决方案。这里我简单介绍，或者说翻译一下作者的方法：
在 Firefox/Opera 等良好支持 W3C 标准的浏览器中，如果我们希望将某个元素固定在页面底部，我们可以给它指派这样的 CSS：
1 2 | position: fixed; bottom: 0; |
对于 IE7 来说，它虽然可以正确的将这个元素 fix 在底部，但它却错误的处理了水平方向的位置。对于这个问题，我们可以利用一个原有的 hack 来解决：
1 2 | left: 50%; margin-left: -390px; |
这里 margin-left 的值应该修改为您页面主要区域宽度的一半。这样 IE7 下基本也就完美了。剩下需要解决的就是 IE6, IE5.5 的问题了，他们不懂得 position: fixed 属性，所以我们需要单独解决一下：
首先我们为这些浏览器单独创建一个样式表，我们可以利用条件注释语句，让 IE<7 的浏览器单独载入这个“多于”的样式表：
1 2 3 | <!–[if IE lt 7]> <link rel=”stylesheet” href=”path/to/stylesheet/ie-stuff.css” type=”text/css” media=”screen” /> <![endif]–> |
然后我们在这个 CSS 文件中，对这个需要固定在页面底部的元素添加 CSS 属性：
1 2 3 | postion: absolute; bottom: auto; top: expression( eval(document.compatMode && document.compatMode==’CSS1Compat’) ? documentElement.scrollTop + (documentElement.clientHeight - this.clientHeight) - 1 : document.body.scrollTop + (document.body.clientHeight - this.clientHeight) - 1); |
这里事实上就是利用了 IE 中特有的 CSS 运算符 expression。在 expression 中我们可以利用 Javascript 计算出需要的 top 值，这样就达到了与 position: fixed 同样的效果。
这种方法原理上来说和以前的 Javascript 方案是相同的，但这种方法显然通用性更好一点。当然，如果您不介意用 Javascript 的话，实现同样的效果会更直观更简单一点。
Jun 22
用DW CS4出web120.org的页面。最后检测兼容性时提示
如果无法将内容放入固定宽度或固定高度的框中，则框会扩展以适应内容，而不是让内容溢出框外。
Internet Explorer 6.0
解决方法：加上 overflow:hidden;即可
May 27
SEO(搜索引擎优化)有很多工作要做，其中对代码的优化是一个很关键的步骤。为了更加符合SEO的规范，下面中部IT网将对目前流行的CSS+DIV的命名规则整理如下：
页头:header
登录条:loginBar
标志:logo
侧栏:sideBar
广告:banner
导航:nav
子导航:subNav
菜单:menu
子菜单:subMenu
搜索:search
滚动:scroll
页面主体:main
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guild
服务:service
热点:hot Read the rest of this entry
May 22
这是晓鹏最近在做单的时候遇到的问题，因为INPUT用到了背景图，所以呢，就要把边框去掉
平时在css中定义一下input 的border:none;就搞定了，这次IE6 IE8 FF3都没问问题了，就在IE7挂掉了，你说让人郁闷不郁闷。。。
经过测试发现，有两种方法解决。
1、定义input的边框和背景色相同，适合纯色背景，具体色值自己改了，我这正好是白色
border:1px solid #fff;
2、就是在原来的none基础上加上0，变为
border:0 none;
记录一下，别望了。说起来这个浏览器兼容性哪天要是不成问题的话多好。。。唉。。。
May 17
嘿嘿，最近在做一个站，用UL的时候发现在IE8下正常的代码在IE6 IE7 FF3.0.10都下不正常，用UL做纵向的图片菜单，图片下方会有间距，如下代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="author" content="www.lixiaopeng.org" />
<title>无标题文档</title>
<style type="text/css">
body{background:#000;}
img{border:none;}
ul{margin:0;padding:0;list-style-type:none;}
</style>
</head>
<body>
<ul>
<li><img src="http://www.baidu.com/img/baidu_logo.gif" /></li>
<li><img src="http://www.baidu.com/img/baidu_logo.gif" /></li>
<li><img src="http://www.baidu.com/img/baidu_logo.gif" /></li>
</ul>
</body>
</html>经过晓鹏的尝试只需要定义一下LI中的IMG就可以解决了，加入CSS为
ul li img{vertical-align:top;}
May 15
在IE下，获取Param的时候有个诡异现象（不知道算不算bug）。为了清晰起见，下面用最简单的HTML和JavaScript来说明。有这么一段HTML（head部分是标准的head，doctype使用xhtml-transitional的DTD）：
<body>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="100%" height="100%">
<param name="movie" value="Test.swf" />
<param name="quality" value="high" />
<embed src="Test.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="100%" height="100%"></embed>
</object>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="100%" height="100%">
<param name="movie" value="Test.swf" />
<param name="quality" value="high" />
<embed src="Test.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="100%" height="100%"></embed>
</body>
</object>现在，我们分别用两种方式来获取第一个object（swf）的param参数个数：
var o = document.getElementsByTagName('object')[0]; alert(o.getElementsByTagName('param').length); alert(o.childNodes.length);
猜猜结果分别是什么？还有，再猜猜o.innerHTML是什么？大家可以自己试试。上面的结果分别是4和2，是不是很诡异？
转自:http://ooboy.net/blog/article/687.aspx
May 15
我们都知道<pre> 标签可定义预格式化的文本，一个常见应用就是用来表示计算机的源代码。被包围在 pre 元素中的文本通常会保留空格和换行符，但不幸的是，当你在<pre>标签里面写代码的时候，如果你没有手动换行，它也会给你保留，而不会动换行。
这时候，你可以使用overflow:auto; (当代码超出容器边界的时候，显示滚动框)， 但这个方法也并不适用于所有主流浏览器，一些浏览器会直接截断超出的内容 。
pre { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ }
出自: Making preformated text wrap in CSS3, Mozilla, Opera and IE
Mar 19
现在进行WEB重构的时候,一般我们做DIV 居中是这样:body{
margin:0px auto;
text-align:center;
}
但是在没申明下面这句解析方法的时候,页面就会出错.不能居中对齐!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
为此困扰了我几天.那么有的朋友就会说:你加上这句不就行了吗? 可是有时候页面并不能全部按上面规定的代码格式来编写,比如说要改多彩滚动条.
直到昨天,一个想法在我脑中闪了一下. 何不用JS来控制页面的边距?说干就干!
找了个页面.添加了下面的一小段代码.
<script language="javascript" type="text/javascript" src="function.js"></script>
function.js内容:
if(window.screen.width>800){document.write("<style type=\"text/css\">body{margin-left:"+(window.screen.width-800)/2+"px}</style>");}
保存,测试. 哈哈,换了几个分辨率都可以正常居中!至此试验成功.
总结一下:
主要是这句代码起的作用:
(window.screen.width-800)/2 //计算页面应该留出的边距数值.800为我的DIV宽度 + 滚动条宽度.实际应用改为你自己的大小.
补充一点:上面这段JS 必须放在你的最后一个CSS连接或</style>的后面.
Oct 13
<head></head>标签对里面的元素包含以下七种：
1、<title>…</title>：存放页面的标题
2、<base>：设定一个a img标签使用的href的基础地址
3、<link>：作用是指向一个可使用的文档
4、<script>…</script>：作用是插入一个独立的JavaScript文件
5、<style>…</style>：作用是插入一个独立的CSS文件
6、<object>…</object>：可以用来引入外部数据
7、<meta>：可以添加作者，发布日期，过期时间，内容描述，关键词等信息
<body></head>标签对里面的元素可以分为“块元素”和“行元素”两大类：
A、块元素（Block elements）
一般性块元素：
1、<p>…</p>：表示一个段落
2、<blockquote>…</blockquote>：表示多个段落
3、<hr<：插入一条分隔线
标题：
4、<h1>…</h1>：插入等级1的标题
5、<h2>…</h2>：插入等级2的标题
6、<h3>…</h3>：插入等级3的标题
7、<h4>…</h4>：插入等级4的标题
8、<h5>…</h5>：插入等级5的标题
9、<h6>…</h6>：插入等级6的标题
列表：
10、<dl>…</dl>：插入一个定义列表
11、<dt>…</dt>：插入一个定义术语
12、<dd>…</dd>：插入一个定义描述
13、<ol>…</ol>：插入一个有序列表
14、<ul>…</ul>：插入一个无序列表
15、<li>…</li>：插入有序列表或者无序列表中的内容
表格：
16、<table>…</table>：插入一个表格
17、<tr>…</tr>：在表格中插入一行
18、<th>…</th>：在表格中插入标题行
19、<td>…</td>：在表格行中插入一格数据
20、<colgroup>…</colgroup>：指定表格中一列或一组列的默认属性
21、<col>：指定基于列的表格默认属性
22、<caption>…</caption>：为整个表格添加一个标题
23、<thead>…</thead>：指定表格的表头部分
24、<tbody>…</tbody>：制定表格的内容部分
25、<tfoot>…</tfoot>：制定表格的结尾部分