div css javascript 浏览器兼容手册

div css教程 javascript教程 浏览器兼容手册

并不一定全，有的也可能不准确，比如新出的IE8、Chrome等都没有太多涉及，虽然最近做的一些项目也兼容了IE8、Chrome等，但都没来的及总结进去，后来就忘了...汗。大家一起慢慢完善吧。

javascript部分

1. document.form.item 问题
问题：
代码中存在 document.formName.item("itemName") 这样的语句，不能在FF下运行
解决方法：
改用 document.formName.elements["elementName"]

2. 集合类对象问题
问题：
代码中许多集合类对象取用时使用()，IE能接受，FF不能
解决方法：
改用 [] 作为下标运算，例：
document.getElementsByName("inputName")(1) 改为 document.getElementsByName("inputName")[1]

3. window.event
问题：
使用 window.event 无法在FF上运行
解决方法：
FF的 event 只能在事件发生的现场使用，此问题暂无法解决。可以把 event 传到函数里变通解决：
onMouseMove = "functionName(event)"
function functionName (e) {
    e = e || window.event;
    ......
}

4. HTML对象的 id 作为对象名的问题
问题：
在IE中，HTML对象的 ID 可以作为 document 的下属对象变量名直接使用，在FF中不能
解决方法：
使用对象变量时全部用标准的 getElementById("idName")

5. 用 idName 字符串取得对象的问题
问题：
在IE中，利用 eval("idName") 可以取得 id 为 idName 的HTML对象，在FF中不能
解决方法：
用 getElementById("idName") 代替 eval("idName")

6. 变量名与某HTML对象 id 相同的问题
问题：
在FF中，因为对象 id 不作为HTML对象的名称，所以可以使用与HTML对象 id 相同的变量名，IE中不能
解决方法：
在声明变量时，一律加上 var ，以避免歧义，这样在IE中亦可正常运行
最好不要取与HTML对象 id 相同的变量名，以减少错误

7. event.x 与 event.y 问题
问题：
在IE中，event 对象有x,y属性，FF中没有
解决方法：
在FF中，与 event.x 等效的是 event.pageX ，但event.pageX IE中没有
故采用 event.clientX 代替 event.x ，在IE中也有这个变量
event.clientX 与 event.pageX 有微妙的差别，就是滚动条
要完全一样，可以这样：
mX = event.x ? event.x : event.pageX;
然后用 mX 代替 event.x

8. 关于frame
问题：
在IE中可以用 window.testFrame 取得该frame，FF中不行
解决方法：
window.top.document.getElementById("testFrame").src = 'xx.htm'
window.top.frameName.location = 'xx.htm'

9. 取得元素的属性
在FF中，自己定义的属性必须 getAttribute() 取得

10. 在FF中没有 parentElement，parement.children 而用 parentNode，parentNode.childNodes
问题：
childNodes 的下标的含义在IE和FF中不同，FF的 childNodes 中会插入空白文本节点
解决方法：
可以通过 node.getElementsByTagName() 来回避这个问题
问题：
当html中节点缺失时，IE和FF对 parentNode 的解释不同，例如：
<form>
<table>
<input/>
</table>
</form>
FF中 input.parentNode 的值为form，而IE中 input.parentNode 的值为空节点
问题：
FF中节点自己没有 removeNode 方法
解决方法：
必须使用如下方法 node.parentNode.removeChild(node)

11. const 问题
问题：
在IE中不能使用 const 关键字
解决方法：
以 var 代替

12. body 对象
FF的 body 在 body 标签没有被浏览器完全读入之前就存在，而IE则必须在 body 完全被读入之后才存在
这会产生在IE下，文档没有载入完时，在body上appendChild会出现空白页面的问题
解决方法：
一切在body上插入节点的动作，全部在onload后进行

13. url encoding
问题：
一般FF无法识别js中的&
解决方法：
在js中如果书写url就直接写&不要写&

14. nodeName 和 tagName 问题
问题：
在FF中，所有节点均有 nodeName 值，但 textNode 没有 tagName 值，在IE中，nodeName 的使用有问题
解决方法：
使用 tagName，但应检测其是否为空

15. 元素属性
IE下 input.type 属性为只读，但是FF下可以修改

16. document.getElementsByName() 和 document.all[name] 的问题
问题：
在IE中，getElementsByName()、document.all[name] 均不能用来取得 div 元素
是否还有其它不能取的元素还不知道（这个问题还有争议，还在研究中）

17. 调用子框架或者其它框架中的元素的问题
在IE中，可以用如下方法来取得子元素中的值
document.getElementById("frameName").(document.)elementName
window.frames["frameName"].elementName
在FF中则需要改成如下形式来执行，与IE兼容：
window.frames["frameName"].contentWindow.document.elementName
window.frames["frameName"].document.elementName

18. 对象宽高赋值问题
问题：
FireFox中类似 obj.style.height = imgObj.height 的语句无效
解决方法：
统一使用 obj.style.height = imgObj.height + "px";

19. innerText的问题
问题：
innerText 在IE中能正常工作，但是 innerText 在FireFox中却不行
解决方法：
在非IE浏览器中使用textContent代替innerText

20. event.srcElement和event.toElement问题
问题：
IE下，even对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性
解决方法：
var source = e.target || e.srcElement;
var target = e.relatedTarget || e.toElement;

21. 禁止选取网页内容
问题：
FF需要用CSS禁止，IE用JS禁止
解决方法：
IE: obj.onselectstart = function() {return false;}
FF: -moz-user-select:none;

22. 捕获事件
问题：
FF没有setCapture()、releaseCapture()方法
解决方法：
IE:
obj.setCapture();
obj.releaseCapture();
FF:
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
if (!window.captureEvents) {
       o.setCapture();
}else {
       window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
if (!window.captureEvents) {
       o.releaseCapture();
}else {
       window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}

CSS部分

div类

1. 居中问题
div里的内容，IE默认为居中，而FF默认为左对齐
可以尝试增加代码margin:auto

2. 高度问题
两上下排列或嵌套的div，上面的div设置高度(height)，如果div里的实际内容大于所设高度，在FF中会出现两个div重叠的现象；但在IE中，下面的div会自动给上面的div让出空间
所以为避免出现层的重叠，高度一定要控制恰当，或者干脆不写高度，让他自动调节，比较好的方法是 height:100%;
但当这个div里面一级的元素都float了的时候，则需要在div块的最后，闭和前加一个沉底的空div，对应CSS是：
.float_bottom {clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}

3. clear:both;
不想受到float浮动的，就在div中写入clear:both;

4. IE浮动 margin 产生的双倍距离
#box {
float:left;
width:100px;
margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
display:inline; //使浮动忽略
}

5. padding 问题
FF设置 padding 后，div会增加 height 和 width，但IE不会 （* 标准的 XHTML1.0 定义 dtd 好像一致了）
高度控制恰当，或尝试使用 height:100%;
宽度减少使用 padding
但根据实际经验，一般FF和IE的 padding 不会有太大区别，div 的实际宽 = width + padding ，所以div写全 width 和 padding，width 用实际想要的宽减去 padding 定义

6. div嵌套时 y 轴上 padding 和 marign 的问题
FF里 y 轴上 子div 到 父div 的距离为 父padding + 子marign
IE里 y 轴上 子div 到 父div 的距离为 父padding 和 子marign 里大的一个
FF里 y 轴上 父padding=0 且 border=0 时，子div 到 父div 的距离为0，子marign 作用到 父div 外面

7. padding，marign，height，width 的傻瓜式解决技巧
注意是技巧，不是方法：
写好标准头
<!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">
高尽量用padding，慎用margin，height尽量补上100%，父级height有定值子级height不用100%，子级全为浮动时底部补个空clear:both的div
宽尽量用margin，慎用padding，width算准实际要的减去padding

列表类

1. ul 标签在FF中默认是有 padding 值的，而在IE中只有margin有值
先定义 ul {margin:0;padding:0;}

2. ul和ol列表缩进问题
消除ul、ol等列表的缩进时，样式应写成: {list-style:none;margin:0px;padding:0px;}

显示类

1. display:block,inline 两个元素
display:block; //可以为内嵌元素模拟为块元素
display:inline; //实现同一行排列的的效果
display:table; //for FF,模拟table的效果
display:block 块元素，元素的特点是：
总是在新行上开始；
高度，行高以及顶和底边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度
<div>，<p>，<h1>，<form>，<ul> 和 <li> 是块元素的例子
display:inline 就是将元素显示为行内元素，元素的特点是：
和其他元素都在一行上；
高，行高及顶和底边距不可改变；
宽度就是它的文字或图片的宽度，不可改变。
<span>，<a>，<label>，<input>，<img>，<strong> 和 <em> 是 inline 元素的例子

2. 鼠标手指状显示
全部用标准的写法 cursor: pointer;

背景、图片类

1. background 显示问题
全部注意补齐 width，height 属性

2. 背景透明问题
IE: filter: progid: DXImageTransform.Microsoft.Alpha(style=0,opacity=60);
IE: filter: alpha(opacity=10);
FF: opacity:0.6;
FF: -moz-opacity:0.10;
最好两个都写，并将opacity属性放在下面

本文章今天收集了w3chool全部在线手册所有教程包括有asp教程,php教程.net教程,html,xm,dom,服务器等教程

http://www.111cn.net/w3school/h.htm

• HTML
• XHTML
• css教程/index.htm">CSS
• TCP/IP

http://www.111cn.net/w3school/x.htm

• JavaScript
• HTML DOM
• DHTML
• VBScript
• AJAX
• E4X
• WMLScript

http://www.111cn.net/w3school/s.htm

• SQL
• ASP
• ADO
• PHP

http://www.111cn.net/w3school/d.htm

• .NET Microsoft
• .NET ASP
• .NET Mobile

http://www.111cn.net/w3school/m.htm

• Media
• SMIL
• SVG

http://www.111cn.net/w3school/w.htm

• 网站构建
• 万维网联盟
• 浏览器信息
• 网站品质
• 语义网
• 职业规划
• 网站主机

http://www.111cn.net/w3school/

// js 常用时间日期函数
function load(){
 var time = new Date( ); //获得当前时间
 var year = time.getFullYear();   //获得年
 var month = (time.getMonth()+1);   //获得月份 0-11
 if(month<10){
  month = '0' + month;
 }
 var ri = time.getDate();       //获得日期 1-31
 if(ri<10){
  ri = '0' + ri;
 }
 var hour = time.getHours( );   //获得小时  0-23
 var minute = time.getMinutes( );  //获得分钟  0-59
 if(minute<10){
  minute = "0"+minute;
 }
 var second = time.getSeconds( );   //获得秒  0-59
 if(second<10){
  second = "0" + second;
 }
 //var hm = time.getMilliseconds();   获得毫秒 0-999
 var day = time.getDay();    //获得星期 0-6
 document.getElementById("now_time").style.color = '#2A7EB7'; //改变了颜色
 switch(day){
  case 0:
   day = "星期日";
   if(day == "星期日"){
    document.getElementById("now_time").style.color = '#F00'; //改变了颜色
   }
   break;
  case 1:
   day = "星期一";
   break;
  case 2:
   day = "星期二";
   break;
  case 3:
   day = "星期三";
   break;
  case 4:
   day = "星期四";
   break;
  case 5:
   day = "星期五";
   break;
  case 6:
   day = "星期六";
   if(day == "星期六"){
    document.getElementById("now_time").style.color = '#F00';  //改变style里面颜色的属性
   }
   break;
 }

 time =year + "年  "+ month +"月"+ri+"日 "+  hour+":"+minute+":"+second +"  "+day;
 document.getElementById("now_time").innerHTML = time;
 //var time = setTimeout("load()",1000);     //setTimeout()小 setInterval()大  看看CUP使用率
}
var time = setInterval("load()",1000);

要在Vista的IIS7上实现这一点我始终没弄成。

　　最后我还是用的老方法，ISAPI，选用了一个5.3以前的版本，我选的是5.2.11。

　　php教程-5.2.11-Win32.zip的下载地址

　　.net教程/distributions/php-5.2.11-Win32.zip">http://cn2.php.net/distributions/php-5.2.11-Win32.zip

　　如果上面的地址不好始，也可以去下面这个地址去从其他镜像下载

　　http://cn.php.net/get/php-5.2.11-Win32.zip/from/a/mirror

　　把php-5.2.11-Win32.zip下载回来之后，把里面的文件解压到C:php目录下(或者是D盘E盘也都行，只是我习惯放C盘)。

　　还要确认一点，在Vista的“打开或关闭Windows功能”里不但要安装IIS，而且还要安装两个重要的ISAPI组件，如下图：

　　下面开始配置PHP了……

　　1、把PHP目录下的php.ini-dist(显示扩展名)改成php.ini，然后用记事本打开，在里面找到extension_dir = "./"，然后把里面的./改成c:php(就是把PHP解压到的那个路径)。

　　2、还是在php.ini这个文件里，找到下面这三行，把它们前面的分号删掉(带分号是注释的意思)

　　extension=php_mbstring.dll

　　extension=php_mssql.dll

　　extension=php_mysql教程.dll

　　3、把php.ini保存，然后复制到Windows目录下。

　　4、打开Vista管理工具中的“Internet信息服务(IIS)管理器”，在“应用程序池”中新建一个应用程序池，取名为PHP，.Net版本为“无托管代码”。

　　5、在“ISAPI筛选器”中点右键“添加”，起名为php，可执行文件选成C:phpphp5isapi.dll。

　　6、在“ISAPI和CGI限制”里点右键“添加”，路径还是选成c:phpphp5isapi.dll，描述还写成php，选中“允许执行扩展路径”。

　　7、在“处理程序映射”里右键“添加脚本映射”，请求路径填*.php，可执行文件还选c:phpphp5ispai.dll，名称还叫php。

　　8、以上工作做完后就基本完工了，下面测试：

　　在IIS指定的站点目录下建一个文件夹，就叫php(我之所以要搭建php+iis，主要是因为我要开发及管理的项目里既有php，也有asp教程和.net的)，然后在这个php目录里新建一个文件phpinfo.php，里面的内容就是经典的PHP测试函数：

　　phpinfo();

　　?>

iis 7.0 http 状态代码

当试图访问通过使用 HTTP 运行 Internet Information Services (IIS) 7.0 的服务器上的内容时 IIS 7.0 将返回一个数字代码，指示响应的状态。 HTTP 状态代码是 IIS 日志中记录的。 此外，HTTP 状态代码可能会显示在客户端浏览器中。

HTTP 状态代码可能表明请求是成功还是失败。 HTTP 状态代码还可能显示一个请求不成功的确切原因。

HTTP 状态代码
本节描述 IIS 7.0 使用的 HTTP 状态代码。

注意 本文不会列出每个可能的 HTTP 状态代码，按照 HTTP 规范中设置。 本文包括只在 HTTP 状态代码 IIS 7.0 可以发送的。 自定义 Internet 服务器 API (ISAPI) 筛选器或自定义 HTTP 模块可以设置自己的 HTTP 状态代码。
1 xx-信息
这些 HTTP 状态代码表示临时响应。 客户端计算机收到一个或多个 1 xx 响应客户端计算机之前收到常规响应。

IIS 7.0 使用以下信息性的 HTTP 状态代码：
100 继续。
101 切换协议。
2 xx-成功
这些 HTTP 状态代码表明服务器成功地接受该请求。

IIS 7.0 使用下面的成功 HTTP 状态代码：
200 确定。 客户端请求已成功完成。
201 创建。
202 被接受。
203 不具有权威性的信息。
204 无内容。
205 重置内容。
206 部分内容。
3 xx-重定向
这些 HTTP 状态代码表示客户端浏览器必须采取更多操作以完成请求。 客户端浏览器可能以请求在服务器上不同的页面。 或客户端浏览器可能要通过使用代理服务器重复请求。

IIS 7.0 使用下面的重定向 HTTP 状态代码：
301 永久移动。
302 对象移动。
304 未修改。
307 临时重定向。