Bookmarks of Webdesign

解決外層DIV高度不適應問題

2008-08-22T20:09:00.009+08:00

外層DIV高度不適應是指當內層對象的高度發生變化時，外層對象的高度不能自動進行調節。特別當內層對象使用了padding或margin定義后，問題更加明顯。

上

內層DIV中的內容

下

這個問題不是IE專屬的，有時候Firefox下也會出現。

解決方法：插入一個“邏輯占位”層
<div id="clear-div"></div>

其style定義如下
#clear-div{height:0; overflow:hidden;}

效果如下：

上

內層DIV中的內容

下

Positon:fixed在IE6中的解決方法

2008-07-14T17:13:00.004+08:00

在版本6以下的IE里，在元素CSS中使用"position:fixed"無法達到將元素抽離數據流并浮動的效果。對此的解決辦法是：

設置CSS屬性
html, body{
height:100%; overflow: auto;}

然后將需要fixed效果的元素設置為
position:absolute;

即可解決問題。

對于一些分辨率低的屏幕，瀏覽器可能會出現兩條豎直滾動條，對此可以有以下解決方法
html{overflow-x:auto; overflow-y:hidden;}
body{height:100%; overflow:auto;}

Original Posts:
Fake position:fixed in IE6
Position:fixed for Internet Explorer

用Javascript獲取瀏覽器屬性

2008-07-14T16:57:00.007+08:00

獲取瀏覽器類型：
function CheckBrowser(){
var cb = "Unknown";
if(window.ActiveXObject){
cb = "IE";
}else if(navigator.userAgent.toLowerCase().indexOf("firefox") != -1){
cb = "Firefox";
}else if((typeof document.implementation != "undefined") && (typeof document.implementation.createDocument != "undefined") && (typeof HTMLDocument != "undefined")){
cb = "Mozilla";
}else if(navigator.userAgent.toLowerCase().indexOf("opera") != -1){
cb = "Opera";
}
return cb;
}

獲取瀏覽器寬度和高度：
function test(){
var s = "";
s += "\r\n网页可见区域宽："+ document.body.clientWidth;
s += "\r\n网页可见区域高："+ document.body.clientHeight;
s += "\r\n网页可见区域宽："+ document.body.offsetWidth +" (包括边线的宽)";
s += "\r\n网页可见区域高："+ document.body.offsetHeight +" (包括边线的宽)";
s += "\r\n网页正文全文宽："+ document.body.scrollWidth;
s += "\r\n网页正文全文高："+ document.body.scrollHeight;
s += "\r\n网页被卷去的高："+ document.body.scrollTop;
s += "\r\n网页被卷去的左："+ document.body.scrollLeft;
s += "\r\n网页正文部分上："+ window.screenTop;
s += "\r\n网页正文部分左："+ window.screenLeft;
s += "\r\n屏幕分辨率的高："+ window.screen.height;
s += "\r\n屏幕分辨率的宽："+ window.screen.width;
s += "\r\n屏幕可用工作区高度："+ window.screen.availHeight;
s += "\r\n屏幕可用工作区宽度："+ window.screen.availWidth;
alert(s);
}

注：

上述代碼是能用在html的声明下，在XHMTL1.0的就不行了。应该把BODY换成documentElement，得到文档的父元素。
IE:document.documentElement.offsetHeight/document.documentElement.offsetWidth
FF:window.innerHeight/window.innerWidth

Original Posts:
利用Javascript判断浏览器类型
如何获取浏览器页面区域的宽度和高度？

ASCII码表

2007-07-30T07:18:00.001+08:00

来源：常用ASCII码对照表
更多：ASCII代码表（0-255）

其他JS常用函数

2007-07-30T07:08:00.000+08:00

设置表单中所有文本型的成员的值为空(清空)
var form = window.document.forms[0]
for (var i = 0; i if (form.elements.type == "text")
{form.elements.value = "";}

下拉列表框的值
document.forms[0].selectName.options[n].value
(n有时用下拉列表框名称加上.selectedIndex来确定被选中的值)

焦点顺序
document.getElementByid("表单元素").tabIndex = 1

innerHTML的值是表单元素的值:如"how are you"
则innerHTML的值就是:how are you

innerTEXT的值和上面的一样,只不过不会把这种标记显示出来

防止用户对文本框中输入文本:onfocus="this.blur()"

数学函数
Math.PI(返回圆周率)
Math.SQRT2(返回开方)
Math.max(value1,value2)返回两个数中的最大值
Math.pow(value1,10)返回value1的十次方
Math.round(value1)四舍五入函数
Math.floor(Math.random()*(n+1))返回随机数

定义日期型变量
var today = new Date();

日期函数
dateObj.getTime()得到时间
dateObj.getYear()得到年份
dateObj.getFullYear()得到四位的年份
dateObj.getMonth()得到月份
dateObj.getDate()得到日
dateObj.getDay()得到日期几
dateObj.getHours()得到小时
dateObj.getMinutes()得到分
dateObj.getSeconds()得到秒
dateObj.setTime(value)设置时间
dateObj.setYear(val)设置年
dateObj.setMonth(val)设置月
dateObj.setDate(val)设置日
dateObj.setDay(val)设置星期几
dateObj.setHours设置小时
dateObj.setMinutes(val)设置分
dateObj.setSeconds(val)设置秒 [注意:此日期时间从0开始计]

设置时间间隔
setInterval("expr",msecDelay)
或setInterval(funcRef,msecDelay)
或setTimeout

防止链接文字折行
document.body.noWrap=true

返回第n个字符的ASCii码值
string.charCodeAt(n)

测试是否为数值型
isNaN(变量)

定义常量的关键字:const
定义变量的关键字:var

JS窗体与框架相关函数

2007-07-30T07:05:00.000+08:00

打开窗口window.open()
关闭窗口:window.close()
窗口本身:self

状态栏的设置
window.status="string";
默认的状态栏文字设置
window.defaultStatus = '文字'

指定当前显示链接的位置
window.location.href="URL"

取出窗体中的所有表单的数量
document.forms.length

关闭文档的输出流
document.close();

创建一个文档元素
document.createElement(), document.createTextNode()

FRAME的表示方式
[window.]frames[n].ObjFuncVarName,frames["frameName"].ObjFuncVarName,frameName.ObjFuncVarName

parent代表父亲对象,top代表最顶端对象
打开子窗口的父窗口为:opener

all代表其下层的全部元素

焦点顺序
document.getElementByid("表单元素").tabIndex = 1

innerHTML的值是表单元素的值:如"how are you"
则innerHTML的值就是:how are you

innerTEXT的值和上面的一样,只不过不会把这种标记显示出来

contentEditable可设置元素是否可被修改
isContentEditable返回是否可修改的状态.

isDisabled判断是否为禁止状态
disabled设置禁止状态

addBehavior()是一种JS调用的外部函数文件其扩展名为.htc

window.focus()使当前的窗口在所有窗口之前.

取出该元素在页面中出现的数量
document.all.tags("div(或其它HTML标记符)").length

分为两种窗体输出
模态 window.showModaldialog()
非模态 window.showModeless()

添加到收藏夹
external.AddFavorite("http://www.deepestdark.com","+ Deepest Dark +");

遇到脚本错误时不做任何操作
window.onerror = doNothing;
指定错误句柄的语法为
window.onerror = handleError;

指定当前打开窗口的父窗口
window.opener
(支持opener.opener...的多重继续.)

top指的是框架集中最顶层的框架

窗口重定向
window.navigate("http://www.deepestdark.com");

打印
window.print()

窗口滚动条
window.scroll(x,y)

窗口滚动到位置
window.scrollby

模态显示(在IE4+行,在NN中不行)
showModalDialog("URL"[,arguments][,features]);

退出之前使用的句柄
function verifyClose()
{event.returnValue="we really like you and hope you will stay longer.";}
window.onbeforeunload=verifyClose;

窗体第一次调用时使用的文件句柄
onload()

窗体关闭时调用的文件句柄
onunload()

window.location的属性
protocol(http:)
hostname(example.com)
port(80)
host(example.com:80)
pathname("/a/a.html")
hash("#giantGizmo",指跳转到相应的锚记)
href(全部的信息)

刷新当前页面
window.location.reload()

window.history.back() 返回上一页
window.history.forward()返回下一页
window.history.go(返回第几页,也可以使用访问过的URL)

JS字符相关函数

2007-07-30T06:36:00.001+08:00

小写->大写
string.toUpperCase();
大写->小写
string.toLowerCase();

字符型->数值型
string.parseInt(), string.parseFloat()

数字->字符型
""+变量
x.toString()

取字符串长度是
string.length

返回字符串2在字符串1中出现的位置
String1.indexOf("String2")
若值为-1则说明没找到.

取字符串中指定位置的一个字符
string.charAt(n);

取出字符串中指定起点和终点的子字符串
string.substring(n,m);

换行:\n

防止链接文字折行
document.body.noWrap=true

返回第n个字符的ASCii码值
string.charCodeAt(n)

字符串连接
string.concat(string2)
或用+=进行连接

string.indexOf("字符",起始位置)
返回第一个出现的位置(从0开始计算)

最后一次出现的位置
string.lastIndexOf(searchString[,startIndex])

判断字符是否匹配
string.match(regExpression)

替换现有字符串
string.replace(regExpression,replaceString)

禁止复制网页内容

2007-05-04T22:01:00.000+08:00

在<body> 里加上：
oncopy="document.selection.empty()" (IE)

在头文件加上
document.onselectstart=new Function("return false"); （IE）

实现半透明的层效果

2007-05-04T19:02:00.000+08:00

假设我们要建立一个透明度为20%的层

在IE中通过CSS定义

.alpha{filter:alpha(opacity=20);}

然后使用class="alpha"来实现

FF不支持上述语句，但用FF能更好简洁地达到效果
只需要在层的style中加上：

-moz-opacity:0.2;

纯css实现圆角div效果—for IE

2007-05-04T18:00:00.000+08:00

以前看到Google的圆角div效果总是很羡慕。
以前自己通过做一个gif再利用滑动门技术来实现，昨天终于在网上找到一种比较好的方法，既不需要图像又不需要javascript，在此记录一下：

CSS：
.rtop, .rbottom{ display:block; background:white;}
.rtop *, .rbottom *{ display:block; height:1px; overflow:hidden; background:lightgrey;}
.r1{margin:0 5px;}
.r2{margin:0 3px;}
.r3{margin:0 2px;}
.r4{margin:0 1px; height:2px;}

html：
<div style="background:lightgrey;">
<b class="rtop">
<b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b>
</b>
<div style="padding:20px;">plate rounded div</div>
<b class="rbottom">
<b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b>
</b>
</div>

以上是平板（无边框）的div效果
我琢磨后给它加上了边框效果，原理是给它加上左右边框

CSS：
.rtop, .rbottom{ display:block; background:white;}
.rtop *, .rbottom *{ display:block; overflow:hidden; height:1px; background:floralwhite; border-left:1px silver solid; border-right:1px silver solid;}
.r1{margin:0 5px; border-left:2px; border-right:2px; background:silver;}
.r2{margin:0 3px; border-left:2px; border-right:2px;}
.r3{margin:0 2px;}
.r4{margin:0 1px; height:2px;}

相关文章：[转] CSS小技巧-快速生成圆角效果—for FF

[转] CSS小技巧-快速生成圆角效果－for FF

2007-04-08T16:29:00.000+08:00

注：仅限于FireFox

　　如果你希望有一个非常快的方法来生成圆角效果，而且你并不真的在意这个效果在某些浏览器中不生效，你可以使用下面的一个定义：

“-moz-border-radius: 8px”

　　这只能在CSS3下的Firefox运行，但是这个只需要几秒钟就可以写好了。如果效果不是对每个设计都很重要，如果你不介意边缘是否光滑。我想这总比什么都没有好一点。
　　比如，我在这个游戏的”Game Over” 对话框用了这个样式表，在这里，任何情况下，我都不考虑圆角是非常重要的。

原文：CSS小技巧（6）快速生成圆角效果
by Philipp Lenssen, translated by Hong Xiaowan

相关文章：纯css实现圆角div效果－for IE

[转] CSS小技巧-PNG文件的平滑技巧

2007-04-08T16:19:00.001+08:00

我很惊讶于Google新个性化主页模板的CSS代码，LOGO使用了跨浏览器的平滑的杂色的背景！你也许用过Photoshop，平滑技巧就是混合背景的一些像素在粗糙的线条周围。因为你必须预先知道需要混合什么颜色的像素，GIF文件只能在静态的背景下工作。理论上，PNG文件支持各种透明度；不过，在IE6的下不能工作，我们将此称为” 重影“，仔细看看Picasa网络相册一些按钮，就是这样。
　　这里是Google的CSS文件，我改了一些，以便于阅读：

#regular_logo{
background:url('test.png');
width:150px;
height:55px;}
/* */

* html #regular_logo{
background:none;
float:left;
width:150px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png',
sizingMethod='scale');}
/* */

　　他们使用一个空的DIV来显示背景PNG文件来取代在HTML中插入图像。这个PNG文件包含各种透明度，它柔软的混合到背景，包括一些阴影效果。现在CSS文件使用了两个选择器，一个是正常的，一个是只在有些浏览器中有效。你可以看到一行以“filter:progid”开头的代码来神奇的适应了IE6。

原文：CSS小技巧（5）PNG文件的平滑技巧
by Philipp Lenssen, translated by Hong Xiaowan

[转] CSS小技巧-怎么找出BUG？

2007-04-08T16:15:00.000+08:00

为什么不能让你的CSS格式表准确的展示你的设计？有一些办法可以找出其中的问题。

　　确认你的HTML没有问题。这是最基本的，如果有个open tag，整个网页可能就乱了。请到W3C HTML，检查一下有什么问题。
　　确认CSS的模式合适。很多浏览器支持”怪异的模式” 和”标准的模式”。比如在Firefox你可以用右键通过页面信息查看是什么模式。在确定模式之前，不要debug。
　　精确的标注。有时，CSS样式表中的名字因为重复而冲突，所以要更精确的标注，比如用 “body div#foo .bar { … }” 取代”.bar { … }” 。
　　Box模式迷惑？多嵌套HTML的TAG会让CSS有时无法工作。快速的处理方法是用类似”div { border: 2px dotted red; }”的样式，来给HTML文件中的每个DIV一个红色的边框，当然你也可以去掉边框，修改样式表，刷新页面就可以看到结果了。
　　Windows的页面在Mac Safari中不兼容！怎样知道CSS在不同浏览器，不同浏览器版本，不同操作系统会有什么不同的效果？简单的方法是用BrowserPool。这个免费小软件让你选择不同的操作系统和浏览器，这可是一个商业机密，你可以通过这个虚拟PC来检查CSS的兼容性。

原文：CSS小技巧（2）怎么找出BUG？
by Philipp Lenssen, translated by Hong Xiaowan

meta http-equiv 功能总结

2007-03-27T17:46:00.000+08:00

META的属性
http－equiv="...."HTTP响应的标题头；
name="....." META信息的名称；
content="...." META信息的具体内容；
scheme="...." META信息的图解。

1.定义语言
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

这是META最常见的用法,在制作网页时,在纯HTML代码下都会看到它,它起的作用是定义你网页的语言,当访客浏览你的网页时,浏览器会自动识别并设置网页中的语言,如果你网页设置的是GB码,而访客没有安装GB码,这时网页只会呈现访客人所设置的浏览器默认语言。
同样的,如果该网页是英语,那么charset=en。
现在较流行的是utf-8，统一编码，支持各种语言。

2.描述网页
<meta name="keywords" content="china,enterprise,business,net">

META也常用来描述网页,以供某些搜索站台机器人的使用。大家知道,搜索站台分为两大类,一类为完全人工登录,比如Yahoo；另一类为机器人搜索,以机器人搜索的搜索站台会包含更多的内容。机器人会搜索网页META标签中所设置的描述关键字,把它们加入到搜索数据库中,用来索引你的网页。而这个标签很少有人注意到。
在格式中,Content列出了你所设置的关键字,这其中的内容可以自行设置,其间用逗号相隔。

3.自动刷新页面
<meta http-equitv="refresh" content="8;URL=http://www.deepestdark.com">

大家在浏览某一个网页时,会发现有些页在数秒后自动转到另外一页,这就是META的刷新作用,在CONTENT中,8代表设置的秒数,而URL就是过8秒后自动连接的网页地址。

4.网页定级评价
<meta http-equiv="pics-label" content='(PICS-1.1 "http://www.rsac.org/ratingsv01.html" l gen true comment "RSACi North America Server" for "http://www.rsac.org" on "1996.04.16T08:15-0500" r (n 0 s 0 v 0 l 0))'>

在Internet Explorer 4.0浏览器Internet选项中有一个内容设置,它可以防止浏览一些受限制的网站,而之所以浏览器会自动识别某些网站是否受限制,就是因为在网站META标签中已经设置好了该网站的级别,而该级别的评定是由美国RSAC,即娱乐委员会的评级机构评定的,如果你需要评价自己的网站,可以连接到网站http://www.rsac.org/,按要求提交表格,那么RSAC会提供一段META代码给你,复制到自己网页里就可以了。

5.控制页面缓冲
<meta http-equiv="expires" content="TUE,11.NOV 1998 00:00 GMT">

META可以设置网页到期的时间,也就是说,当你在Internet Explorer 4.0浏览器中设置浏览网页时首先查看本地缓冲里的页面,那么当浏览某一网页,而本地缓冲又有时,那么浏览器会自动浏览缓冲区里的页面,直到META中设置的时间到期,这时候,浏览器才会去取得新页面。

7.禁止本地缓冲
<meta http-equiv="Pragma" contect="no-cache">

是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出；

8.cookie设定
<meta http-equiv="set-cookie" contect="Mon,12 May 2004 00:20:00 GMT">

如果网页过期，存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式；

9.强制页面独立显示
<meta http-equiv="windows-target" contect="_top">

强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用；

10.禁止机器人收录此页
<meta name="robots" content="noindex, nofollow">

[NOINDEX]
prevents anything on the page from being indexed. （但根据实际经验，Google并非100%遵守）
[NOFOLLOW]
prevents the crawler from following the links on the page and indexing the linked pages. (这是为了解决链接spam而设计的Meta标签)
[NOIMAGEINDEX]
prevents the images on the page from being indexed but the text on the page can still be indexed.
[NOIMAGECLICK]
prevents the use of links directly to the images, instead there will only be a link to the page.
[NOARCHIVE]
Google supports a NOARCHIVE extension to this scheme （告诉Google不要保存含此标签的网页的快照）
[NOSNIPPET]
告诉Google不要在搜索结果页的列表里显示含此标签的网站的描述语句，并且不要在列表里显示快照链接。

11.网页描述
<meta name="description" content="Fyfy Wong's Homepage">

资料整理：Fyfy Wong
More Detailed Information: HTML META TAGS

页面自动跳转

2007-03-27T09:55:00.000+08:00

页面自动跳转

<meta http-equiv="refresh" content="1; url=about.html" />

常用域名含义一览表

2007-03-14T01:50:00.000+08:00

.com--商业机构（commercial organizations）地址
.edu--教育（education）及研究机构地址
.gov--政府机构（government agencies）地址
.net--主要网络服务机构地址
.org--专业团体组织（organizations）
.biz--可以替代.com的通用顶级域名，适用于商业公司
　　　(注：biz是business的习惯缩写形式)
.info--可以替代.com的通用顶级域名，适用于提供信息服务的企业；
.name--适用于个人的通用顶级域名；
.pro--适用于医生、律师、会计师等专业人员的通用顶级域名
　　　(注：pro是professional的习惯缩写形式)
.coop--适用于商业合作社的专用顶级域名
　　　(注：coop是cooperatives的习惯缩写形式)
.aero--适用于航空运输业的专用顶级域名；
.museum--适用于博物馆的专用顶级域名

相关连接：常用域名含义一览表

利用层作仿Win多选框组效果

2007-02-13T21:02:00.000+08:00

根据前一篇文章简单的子母多选框的原理重新改良仿win应用程序的分类多选框功能。

原理：利用层的嵌套将处于同组、同地位的多选框放入同一层内，再通过使用层外的多选框对层内多选框组（即该层的子元素）checked属性加以控制。

　　实际效果体验: Checkbox Test (Complex)

　　这种效果用在后台管理，尤其是管理员管理用户（比如说论坛用户）的权限时，十分方便。

　　如果你确定你的用户全是IE使用者，那么js代码将会非常简单。只需要用到亩多选框的"onpropertychange"方法与层对象children方法（如简单的子母多选框）一文中所示。
　　但现在，没有设计者会只为一种浏览器的使用者服务了，所以要使IE与FF使用者同时无障碍地使用此功能，代码比预期长了又长。

　　以下代码为点击母选框时全选/全不选下级（包括下下级）所有子选框
　　因为标准问题，无法用递归法调用checkchild，因为一旦不符合if条件，浏览器将自动跳出未完成的上级循环，导致显示失败。因此，要根据不同级的母选框定制不同的程序（下同）
　　::cname - 层id
　　::mname - 母选框id

//for MASTERs
function
checkchild1(cname,mname)
{
var
child=document.getElementById(cname).childNodes;
for(i=0;i<child.length;i++)
{ if (child[i].nodeType==1)
{
child[i].checked= mname.checked;
//finished checked Slaves
if(child[i].hasChildNodes=true)
{ var cchild=child[i].id;
var ccc=document.getElementById(cchild).childNodes;
for(j=0;j<ccc.length;j++)
{ if (ccc[j].nodeType==1)
{ccc[j].checked=mname.checked; //finished checked s,s
}}}}}}

//for Slaves
function checkchild2(cname,mname)
{
var
child=document.getElementById(cname).childNodes;
for(i=0;i<child.length;i++)
{ if (child[i].nodeType==1)
{
child[i].checked= mname.checked; //finished checked s,s }}}

　　下面代码为点击子选框时，检查同组子选框的状态以反控制母选框状态（全选子选框时自动选上选框，其余情况母选框checked==false）
　　::pname - 母选框id
　　::cdiv - 层id

//[Check parentNodes] for s,s -- target: Slaves
function cp(pname,cdiv)
{ var cd =
document.getElementById(cdiv).childNodes;
var a=0, b=0;
//"a" counts checked options;
//"b" counts total child elements of this div
for(i=0;i<cd.length;i++)
{ if
((cd[i].nodeType==1)&&(cd[i].checked==true))
{a++;}
if (cd[i].nodeType==1)
{b++;} }
if(a==b)
{document.getElementById(pname).checked=true;}
else
{document.getElementById(pname).checked=false;}}

//[Check parentNodes] for Slaves -- target: MASTERs
function cp2(pname,cdiv)
{var cd =
document.getElementById(cdiv).childNodes;
var a=0, b=0;
//"a" counts checked options;
// "b" counts total child elements of
this div
for(i=0;i<cd.length;i++)
{ if ((cd[i].nodeType==1)&&(cd[i].checked==true))
{a++;}
if (cd[i].nodeType==1)
{b++;} }
if(a==(b/2)) //--here's the difference, FAT!!
{document.getElementById(pname).checked=true;}
else
{document.getElementById(pname).checked=false;}}

　

我们一直埋怨IE是最不支持标准的浏览器，但（至少）在这个案例中，IE要比FF对设计者更友好 =P

简单的子母多选框

2007-02-10T00:12:00.000+08:00

[代码段1]只能实现简单的全选/全不选功能

<input type="checkbox" name="checkA"
onclick="for(i=0;i<A.children.length;i++){A.children[i].checked=this.checked}"
/>
MASTER<br>
<span id="A">
<input type="checkbox" name="A1" /> Slave1
<input type="checkbox" name="A2" /> Slave2
<input type="checkbox" name="A3" /> Slave3
</span>

[代码段2]加上一段js验证即可实现仿win应用程序的分类多选框功能
注意：此方法只适用于IE！

function checkas()
{
var sum_as=0;

for(i=0;i<A.children.length;i++)
{if(A.children[i].checked==true)
sum_as++;}

if(sum_as==A.children.length)
{checkA.checked=true;
checkA.disabled=false;}
else if(sum_as==0)
{checkA.checked=false;
checkA.disabled=false;}
else
{checkA.checked=true;
checkA.disabled=true;}
}

只要为span的每个子元素（checkbox）加上 onclick="checkas();"即可

更多操作请参看相关连接：利用层作仿Win多选框组效果、仿win应用程序的分类多选框功能及表单元素失效后

IE与FF的显示差异

2007-02-05T02:24:00.000+08:00

div的style设置：
　　width:50px; height:50px;
　　padding:20px; margin:20px;
　　background-color:#CCFF99; border:red 10px solid;

1. overflow:visible;

2. overflow:hidden;

IE与FF对标准支持的差异（不断更新）

2007-02-04T01:49:00.000+08:00

网页在IE和FF其一中浏览正常而在另一个里布局全乱的情况时常出现。引起这些差异原因就是两种浏览器对标准支持的差异

　　FF是现今唯一对CSS2.0完全支持的浏览器，因此在网页浏览时，尤其是浏览符合W3C及应用了部分CSS2.0的网页时，效果比IE好
　　由于IE不支持CSS2.0，许多只需要伪类就可完成的设置要通过javascript来完成
　　但也由于FF是严格支持W3C的，因此某些HTML4.0下的设置在FF里展现不出

本文对比标准：IE6.0 vs Firefox 1.5

Firefox支持而IE不支持的CSS设定：

对处在容器中（如div）的块状元素用margin{0 auto;}进行居中
非锚（a）对象的伪类 hover、visited等
border-style中除"solid"、"dotted"之外的样式（在IE中dotted与dashed显示一样）
testarea对象滚动条的设置为"auto"（必要时出现）

IE支持而Firefox不支持的设定：

改变滚动条颜色。不论在CSS里定义body还是html都无法实现
通过javascript自动设置iframe的高度

鼠标经过改变文本框颜色

2007-02-03T02:29:00.000+08:00

很简单的代码，不需要用到Ajax或长段javascript那么复杂

主要代码：

onmouseover="this.style.borderColor='yellowgreen'"
onmouseout="this.style.borderColor='gray'"

改变滚动条颜色

2007-01-31T01:50:00.000+08:00

在没有文件声明时，可以在body的css定义中使用"scrollbar-base-color"等改变滚动条的颜色。一旦加上DOCTYPE，浏览器在W3C的规定下将视scrollbar定义为无物。
　　一个在论坛讨论中常见的解决方法是去掉页面的DOCTYPE，那么浏览器将回到默认标准，显示出依照你设定的页面。
　　其实，最简单而又不需抛弃W3C的解决方法是将原本对body对象的定义转移到html对象上，如：

html{
scrollbar-face-color: LavenderBlush;
scrollbar-highlight-color: LavenderBlush;
scrollbar-shadow-color: LavenderBlush;
scrollbar-3dlight-color: white;
scrollbar-arrow-color: pink;
scrollbar-track-color: white;
scrollbar-darkshadow-color: LavenderBlush;}

注：此方法也适用于非W3C的css定义如"overflow-x"，"overflow-y"等

"回到前页"链接

2007-01-31T01:43:00.000+08:00

使用“历史回退”，网页的重载速度最快，且在大量类同的（静态）页面中无须逐个更改“回到前页”的链接。

<a href="javascript:history.back();">回到前页</a>

去掉iframe的水平滚动条

2007-01-30T19:40:00.000+08:00

使用iframe的设计人员都会发现，即使<iframe>内文档只有100px而iframe宽度为500px，都会出现水平滚动条。
　　如何去掉iframe的水平滚动条而保留垂直滚动条？

只要在iframe引用文档里加上

html { overflow-x:hidden; }

　
注：以前常用的是

body{ overflow-x:hidden; }

但"overflow-x"在标准DTD里是不可用的（by hutia）

资料整理：Fyfy Wong　　信息来源：经典论坛

兼容标准的浏览器一览

2007-01-26T01:33:00.000+08:00

以下列出部分当下（中国）流行的浏览器对标准的支持情况

Netscape 6+
推出时间：2001年
HTML/XHTML：支持
CSS：支持全部CSS1，大部分CSS2
ECMAScript/DOM：基本支持
特性：基于Gecko的浏览器。为增强可访问性而加入了文本缩放功能，支持用户样式表和可选样式表，从7.01开始支持自动弹出广告屏挡

Mozilla 1.0
推出时间：2002年
HTML/XHTML：支持
CSS：支持全部CSS1，大部分CSS2
ECMAScript/DOM：基本支持
特性：开放源码的、基于Gecko的浏览器。为增强可访问性而加入了文本缩放功能，支持用户样式表和可选样式表。Mozilla不仅仅用于浏览，你可以用Gecko和开放源代码的Mozilla基本代码创建超越传统台式浏览器的新应用程序（如用Mozilla和Java制作的电视机顶盒）。

MSIE6 / Windows
推出时间：2001年
HTML/XHTML：支持
CSS：支持全部CSS1，部分CSS2
ECMAScript/DOM：基本支持，但需要一些专门的辅助程序。
特性：目前网络使用最多的浏览器，部分原因是它是唯一的操作系统内置浏览器。不包含文本缩放功能，不支持可选样式表。视力受损的用户可以通过设置“辅助功能”里的“忽略文档字号”来提高可访问性。但这种“all or none”的选择没有其他标准兼容浏览器提供的文本缩放和页面缩放方便好用。

资料来源：Jeffrey Zeldman．《网站重构：Designing with Web Standars》

DOCTYPE转换

2007-01-25T19:41:00.000+08:00

若网页的标记以一个DOCTYPE开始，说明设计师可能知道Web标准，并且已经作出努力以适应Web标准。浏览器应根据W3C的规则分析这样的网页。相反，不存在DOCTYPE的网页不能通过W3C的校验测试（http://validator.w3.org/），而且这样的网页极有可能是使用老方法创建的，浏览器应该区别对待网页（用老式的、非适应性的方式显示网页）。
　　因此，要控制浏览器采用哪种模式，我们要做的只是插入或者完全省略一个DOCTYPE。

许多现代浏览器采用的触发标准模式（完整的、标准的模式）：

<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

不完整的模式（相对定位）：

<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">

　　除非你已经将dtd文件下载到你的服务器目录（显然大多数人不会这样做），这个连接将连接不上任何东西。因此，浏览器只能以Quirk模式显示你的网站。在Quirk模式情况下，会产生css校验错误，但不会生成XHTML校验错误。
　　要注意的是，如果还包含可选的　XML prolog（如：<?xml version="1.0" encoding="ISO-88591-1"?>），IE6/windows就会返回到Quirk模式

完整 XHTML DOCTYPE 的完整列表

XHTML 1.0 DTD

XHTML 1.0 Strict（严格方式）
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

浏览器解析相对严格，不允许使用任何表现形式的标识和属性（如bgcolor）
　
XHTML 1.0 Transitional（过渡方式）
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

浏览器对XHTML的解析较宽松，允许HTML4.0中的标签，但必须符合XHTML的语法
　
XHTML 1.0 Frameset（框架方式）
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

如果网页使用了框架结构，就有必要使用这个文档声明

XHTML 1.1 DTD
XHTML 1.1（严格定义）
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">

　　在IE（IE6+/window, IE5+/Macintosh）的相应版本和基于Gecko的浏览器（Mozilla Firefox和Netscape）的早期版本（Netscape6, Mozilla 1.0）上，任何完整的XHTML 1.0 或 1.1 DOCTYPE 都会触发标准模式
　　本质来说，推荐使用“严格方式”和“严格定义”的DOCTYPE，但在现阶段直接使用严格方式有时会使编码方式变得过分狭窄，因此一般情况下使用“过渡方式”

资料整理：Fyfy Wong　　信息来源：《网站重构》《CSS网站布局实录》
最后修改日期：2007-02-03

使用css的三种方式

2007-01-25T13:20:00.000+08:00

外联样式表
通过在<head>标签之间的一个超链接导入css文件中的css设置：
<link rel="StyleSheet" href="/styles/format.css" type="text/css" media="all" />
或在<style>标签里用 @import命令输入到样式表中，又称为“联合输入法”，可同时输入一个以上的样式表，如：
<style type="text/css" media="all">
@import "/styles/format.css";
</style>
或
<style type="text/css" media="all">
@import url("/styles/format.css");
</style>
使用外联样式表的好处是大量地节约带宽。
　
嵌入样式表
在头文件（<head>标签之间）嵌入样式表
<style>
body {font-size: small;}
</style>
嵌入样式表不节约带宽，多用在网页效果调试的过程中，使设计者能马上看到单页修改的效果。通常在调试完后将样式复制到外部css文件中，再通过外联样式表的方法来导入使用。
　
内联样式表
通过在元素标签内加上样式属性，如：
<td style="color: silver;">I'm silver</td>
滥用内联样式将如滥用<font>标签一样浪费，它只是一个使css更完善的补充方法

[补充]

　　在外联样式表中，"media"是可选的属性，表示使用样式表的网页将用什么媒体输出。如果要输出到多种媒体，可以用逗号分隔取值表。取值范围：
　　·screen（默认）：输出到电脑屏幕
　　·print：输出到打印机
　　·tv：输出到电视机
　　·projection：输出到投影仪
　　·aural：输出到扬声器
　　·braille：输出到凸字触觉感知设备
　　·tty：输出到电传打字机
　　·all：输出到以上所有设备

　　"rel"属性表示样式表将以何种方式与HTML文档结合。取值范围：
　　·stylesheet：指定一个外部的样式表
　　·alternate stylesheet：指定使用一个交互样式表

　　如果同时输入多个样式表（使用"@import"联合输入）有冲突的时候，将按照第一个输入的样式表对网页排版。
　　如果输入的样式表和网页里的样式规则冲突时，使用外部的样式表。

css选择器总结

2007-01-25T12:57:00.000+08:00

群选择器

p, td, ul, ol, ul, li, dl, dt, dd {font-size: small;}

能解决某些浏览器不支持元素继承的问题。甚至IE6里也有类似问题：body里设置的字体属性在td里被忽略了。

内容（派生）选择器

li strong{color: blue;}

如此，包含在<li>标签里的<strong>里的字体将显示为蓝色，而对单独的<li>和<strong>不起作用。

id选择器与内容id选择器

#navbar {border: 1px dotted dimgray;}

id选择器——id为"navbar"的元素将由深灰色的点状边框包围

#navbar p{font-size: small;}
#navbar td{font-size: small; color: green;}

内容id选择器——只对id为"navbar"的元素里的指定内容（p, td）进行设置

类别选择器

.navbar{color: silver;}

任何class属性为"navbar"的元素字体皆为银色

常用的是根据类别挑选元素：

td.navbar{font-size: small; color: silver;}

任何class属性为"navbar"的单元格内字体皆为银色小号字体

和id一样，类别选择器也可作内容选择器：

.navbar p{font-size: small;}

内容类别选择器——任何class属性为"navbar"的元素里指定内容（td）的字体为小号

*注：id选择器与类别选择器应用中最大的区别来自id的唯一性和class的广泛性

css定义背景

2007-01-25T03:04:00.000+08:00

background-color: red;
background-image: url(/images/test.gif);
或简写成
background: red url(images/test.gif)

　　光定义字体颜色不定义背景是不足够的。一般来说，在body的属性加上背景色的定义是有必要的，即使在设定背景为白色的情况下，最好也加上“background-color: white;”。
　　这样可以避免低版本的浏览器，或者一些为追求个性化而将浏览器默认背景色更改为其它颜色（非白色）的用户在浏览你的网页时出现问题。

　　使用

background: transparent;

　　可以避免一个定义背景覆盖另一个背景。具体可应用在iframe中，将其外联的网页（src的对象）背景设置为透明。
　　注意：无论你是否声明，对象背景颜色默认都为透明。但在iframe中，在没有设置transparent的情况下，IE不支持透明（iframe背景将变为白色）而firefox支持。

css颜色编码规则

2007-01-25T02:54:00.000+08:00

color: red;
color: #ff0000;
color: #f00;
color: rgb(255,0,0)
color: rgb(100%,0%,0%)

以上代码均表示红色。

注意在指定RGB百分率时，零值后仍要加上百分比号"%"。

仿win应用程序的分类多选框功能

2007-01-24T23:07:00.000+08:00

如何做出仿window下应用程序安装时的分类多选框功能（如下）？

效果描述：
　　1. 点击母选项（master）时，全选/全不选其子选项（slave）；
　　2. 当子选项未被全部选择时，母选项呈灰色勾选状态（disabled并checked）；
　　3. 子选项被全部选择/不选择时，母选项呈选中（checked）/未选中（checked==false）状态

　　首先建立一个母选项，命名为“master”，多个子选项并命名为“slave”。

表单代码段

<form name="test" action="#" method="post" target="_self">
<span id="masterdiv" onmouseover="focusmst();" onmouseout="lostfocusmst();"> <input onclick="checkmst();" type="checkbox" value="m" name="master"></span> MASTER
<hr />
<input onclick="checkslv();" type="checkbox" value="s1" name="slave"> Slave1
<input onclick="checkslv();" type="checkbox" value="s2" name="slave"> Slave2
<input onclick="checkslv();" type="checkbox" value="s3" name="slave"> Slave3
</form>

　　注意橙色的<span>部分：因为失效的表单元素（见上图“MASTER”）本身不能响应鼠标或键盘事件（见“表单元素失效后”一文），解决方法之一为将此元素（本例中为名为master的复选框）包含在内嵌元素span中。然后由span元素对事件作出响应。

javascript代码段

<script language="javascript">
var form=document.test

function checkslv() //按顺序检查子选项是否被选中
{
var i,sum_i=0;

for(i=0;i<form.slave.length;i++)
{ if(form.slave[i].checked==true)
sum_i++; }

if(sum_i==0)
{ form.master.checked=false;
form.master.disabled=false; }
else if(sum_i<form.slave.length)
{ form.master.checked=true;
form.master.disabled=true; }
else if(sum_i==form.slave.length)
{ form.master.checked=true;
form.master.disabled=false; }

}

function checkmst() //检查母选项是否被选中
{
form.master.disabled=false;
if(form.master.checked==true)
{for(i=0;i<form.slave.length;i++)
form.slave[i].checked=true; }
if(form.master.checked==false)
{ for(i=0;i<form.slave.length;i++)
form.slave[i].checked=false; }
}

function focusmst() //鼠标经过时激活母选项
{ form.master.disabled=false; }

function lostfocusmst() //鼠标经过后激活子选项检查函数以回复到应有状态
{ checkslv(); }
</script>

相关连接：利用层作仿Win多选框组效果、简单的子母多选框、表单元素失效后

表单元素失效后

2007-01-24T21:09:00.000+08:00

表单元素失效（disabled）后将不能响应鼠标及键盘事件如onclick、onmouseover
、onkeypress等，而必须通过其他未失效控件将其激活后才能相应事件

如希望表单元素失效后仍能响应事件，有以下的解决方法

<方法一>
另外设置其它元素如按钮、超链接、切换按钮（复选、单选框）等控制目标元素的激活

<方法二>
将目标元素镶嵌在块元素<div>或内嵌元素<span>内，由div或span来响应事件
具体例子请参考“仿win应用程序的分类多选框功能” 一文。

JS控制窗口刷新

2007-01-24T20:42:00.000+08:00

window.location.reload()
或
document.location.reload()

其中，"document"对应本文档重载，"window"对应当前窗体重载（即使代码段位于frame或iframe中也可使整个窗体重载）