当前位置: 代码迷 >> HTML/CSS >> javascript跟css兼容性小结
  详细解决方案

javascript跟css兼容性小结

热度:419   发布时间:2012-11-11 10:07:57.0
javascript和css兼容性小结

?

XHTML和HTML之间的区别
1.XHTML 元素一定要被正确的嵌套使用。
2 XHTML 文件一定要有正确的组织格式。
<html>
  <head> ... </head>
  <body> ... </body>
  </html> 
3 标签名字一定要用小写字母。
因为 XHTML文档是XML应用程序, XML 对大小写是敏感的
4 所有的 XHTML 元素一定要关闭,独立的一个标签我们也要结束用 />来结束。
5 XHTML的一些其他语法要求:  属性名字必须小写。如:
正确的代码:
  <dl compact="compact">
  <input checked="checked" />
  <input readonly="readonly" />
  <input disabled="disabled" />
  <option selected="selected" />
1.div的垂直居中问题 

     vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行  
1. getYear()方法
var year= new Date().getYear();
document.write(year);//ie = 2011" ff和chrome=111,因为在ff里面 getYear 返回的是 "当前年份-1900" 的值。

【兼容处理】通过 getFullYear getUTCFullYear 去调用: 
var year = new Date().getFullYear();document.write(year); //2011

动态设置表单元素的float属性的区别:

var test = document.getElementById("test");
test.style.float="right";//chrome
test.style.styleFloat="right";//IE
test.style.cssFloat = "right";//FF


word-break:break-all;//div内容超过div宽度,则把文字切碎换行。
word-wrap:break-word; //配合使用 表示吧单词切断了。
min-width: 80px;
min-height: 35px;
max-width:400px;
margin-left:auto;margin-right:auto; //非IE浏览器实现居中,IE需要加上text-algin:center;

overflow:auto;				//自动出现滚动条

cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以

被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A Code: <style type="text/css"> 

   a:link {color:blue;} a:hover {color:yellow;} a:active {color:red;}  a:visited {color:green;}


{margin:0;padding:0;}浏览器大都有自己的默认值,手动设置为0就能解决大部分问题

div{margin:30px!important;margin:28px;} 为了兼容FF,可以为FF提供自己的样式,使用!important,注意这两个 margin的顺序一定不能写反, important这个属性IE不能识别,

Object.style.background=
	background-color:color/blue,#FFFFF;
	background-image:url(images/a.jif);
background-repeat:’no-repeat/repeat-x/repeat-y/repeat; 
background-attachment: scroll/fixed;
background-position: (top,left)/(23px,34px)/(12%,30%)

width:auto !important;width:100px;height:auto;max-width:400px;
非IE浏览器支持width=auto,但是IE不识别,所以使用import,同时max-width样式IE也不识别。

滤镜:
IE:filter:alpha(opacity=30,style=1)"> 
opacity=30 表示滤镜为30%,style有效值为 1 2 3 4
	IE复杂?滤镜效果:
<div style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#3568CC', gradientType='0');
widht:100px; height:100px;"></div>

FF:	opacity: .1 表示滤镜为10%(也可以写0.1)

事件兼容写法:var e = e||window.event;
Event.x的兼容性写法:var x = event.clinetX; 	IE and FF 等 都有
但是clientX和event.x有细微?差别,
更标的写法:Var x = event.x?event.x:event.pageX;


事件源兼容写法:(取得事件触发的dom的tagName)
var event = e ||window.event;
	var srcDom = event.srcElement || event.target
	alert(srcDom.tagName)

window.open()的参数and说明
channelmode=yes|no|1|0	是否使用剧院模式显示窗口。默认为 no。
directories=yes|no|1|0	是否添加目录按钮。默认为 yes。
fullscreen=yes|no|1|0	是否使用全屏模式显示浏览器。默认是 no。处于全屏模式的窗口必须同时处于剧院模式。
height=pixels	窗口文档显示区的高度。以像素计。
left=pixels	窗口的 x 坐标。以像素计。
location=yes|no|1|0	是否显示地址字段。默认是 yes。
menubar=yes|no|1|0	是否显示菜单栏。默认是 yes。
resizable=yes|no|1|0	窗口是否可调节尺寸。默认是 yes。
scrollbars=yes|no|1|0	是否显示滚动条。默认是 yes。
status=yes|no|1|0	是否添加状态栏。默认是 yes。
titlebar=yes|no|1|0	是否显示标题栏。默认是 yes。
toolbar=yes|no|1|0	是否显示浏览器的工具栏。默认是 yes。
top=pixels	窗口的 y 坐标。
width=pixels	窗口的文档显示区的宽度。以像素计。

注意:参数之间使用,号分隔,这个区别于样式的写法 demo:
window.open("a.htm","_blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400")

FF圆角: -moz-border-radius:4px,

Date对象的getDate()的兼容性写法:var y  =now.getFullYear();
	FF 和chrome里面 getYear 返回的是 "当前年份-1900" 的值。

给DOM对象设置属性一律使用setAttribute方法。

设置DOM对象的样式
IE和FF都支持object.className,所以可以这样写:
var myObject = document.getElementById("header");
myObject.className="classValue"



获取键盘值的兼容性写法:
<input id="txt"  onkeydown="dotest(event)">
function dotest(e){
	var event = e||window.event;
	var code = e.which || e.keyCode;
	alert(code)
}
注意:在调用dotest方法的时候需要传递event参数,而且,参数的名称必须是event
例如:<input id="txt"  onkeydown="dotest(event)"> 
如果<input id="txt"  onkeydown="dotest(e)"> 则失效
备用:同时按住alt ctrl shift等
altKey,ctrlKey,shiftKey:顾名思义,这些属性是指鼠标事件发生的时候,是否同时按住了Alt、Ctrl或者Shift键,返回的是一个布尔值。



事件绑定的兼容性写法:
var divDom = document.getElementById("box");
		//divDom.onclick = function(){alert('aaaaaaaa')}
// 这种写法虽然兼容,但是新的onclick方法覆盖了原始的onclick方法。
	if(divDom.attachEvent){
		divDom.attachEvent("onclick",function(){
//这种写法仅IE兼容 注意:IE事件方法加上on
			alert("IE")
		})
	}else{
		divDom.addEventListener("click",function(){
//FF chrome等等兼容,注意:FF等等事件不加on
			alert("FF")
		},false)  	//这个参数必须加,但是什么作用还不清楚???
	}
对应的移除事件监听分别为:detachEvent 和removeEventListener
测试了,但是没有成功的移除事件监听????????


childNodes在IE和FF下的区别:

<ul id="main"> <li>1</li> <li>2</li> <li>3</li></ul> <input type=button value="click me!" 
onclick="alert(document.getElementById('main').childNodes.length)">

IE下返回3,但是FF和Chrome返回6,(网友说使用#text判断)

清空一个select的options的兼容性写法:
sel.options.length = 0; //将options的长度置为0就可以了。

标准户:给每个图片加上alt属性,alt:当照片不存在或者load错误时的提示。
其中FF做得最好,如果图片不存在完全用alt的文本填充,IE下还有一块破碎的图片显示,但是也有文本题是,而chrome则什么文字都没有;

FF图片缓存问题:
有的网友说,FF下有图片缓存的问题,要想动态设置图片的src,最好使用随机数的方法:
<img onclick= "this.src='a.gif?'+Math.random()" src="b.gif" alt="图片缺失"/>
经测试,FF下并么有发现有图片缓存问题(可能是没有触发),按照上边加?号的写法图片也正常显示,先记录下来吧,或许将来用得到。

获得事件的前一个事件对象和后一个事件对象:(获取tagName为例)
Html代码:
<input id="txt" 
onmouseover="goin(event)"  onmouseout="goout(event)">
<span>aaaaaaaaaaaaaaaaa</span>

JS代码:
function goin(e){
	var event = e||window.event;
	var src = event.target || event.srcElement;
	if(event.fromElement){
		alert("IE from "+event.fromElement.tagName);
	}else{
		alert("FF from "+event.relatedTarget.tagName);
	}
}

function goout(e){
	var event = e||window.event;
	var src = event.target || event.srcElement;
	if(event.fromElement){
		alert("IE TO "+event.toElement.tagName);
	}else{
		alert("FF to "+event.relatedTarget.tagName);
	}
}


(一)IE Event对象的主要属性和方法
  在IE中有一个专门负责事件处理的对象Event,这个对象负责对事件的处理,含有很多的属性和方法,通过这些方法和属性的调用,就能完成很多的事件处理。
  type:事件的类型,就是HTML标签属性中,没有“on”前缀之后的字符串,例如“Click”就代表单击事件。
  srcElement:事件源,就是发生事件的元素。
  button:声明了被按下的鼠标键,是一个整数。1代表鼠标左键,2代表鼠标右键,4代表鼠标的中间键,如果按下了多个鼠标键,就把这些值加在一起,所以3就代表左右键同时按下。
  clientX/clientY:是指事件发生的时候,鼠标的横、纵坐标,返回的是整数,它们的值是相对于包容窗口的左上角生成的。
  offsetX/offsetY:鼠标指针相对于源元素的位置,可以确定单击Image对象的哪个象素。
  altKey,ctrlKey,shiftKey:顾名思义,这些属性是指鼠标事件发生的时候,是否同时按住了Alt、Ctrl或者Shift键,返回的是一个布尔值。
  keyCode:返回keydown和keyup事件发生的时候,按键的代码以及keypress事件的Unicode字符。
  fromElement、toElement前者是指代mouseover事件移动过的文档元素,后者指代mouseout事件中鼠标移动到的文档元素。
  cancelBubble:一个布尔属性,把它设置为true的时候,将停止事件进一步起泡到包容层次的元素。
  returnValue:一个布尔值属性,设置为false的时候可以组织浏览器执行默认的事件动作,相当于<a href=”#” onclick=”ProcessMethod();return false;” />。
  attachEvent()和detachEvent()方法:为制定DOM对象事件类型注册多个事件处理函数的方法,它们有两个参数,第一个是事件类型,第二个是事件处理函数。在attachEvent()事件执行的时候,this关键字指向的是window对象,而不是发生事件的那个元素。

差别:12. body 对象
 火狐的body在body标签没有被浏览器完全读入之前就存在,而IE则必须在body完全被读入之后才存在

脚本延迟:
在<script>元素中设置defer属性(如下面的例子所示),实际上与上一节中介绍的把<script>元素放在页面最底部的效果是一样的。

	<script type="text/javascript" defer="defer" src="example1.js"></script> 

Noscript的使用:
浏览器都会显示<noscript>中的内容。而在除此之外的其他情况下,浏览器不会呈现<noscript>中的内容。
 <body> 
    <noscript> 
      <p>本页面需要浏览器支持(启用)JavaScript。  
    </noscript> 
  </body> 





第二季:

 2.IE中事件的起泡:IE中事件可以沿着包容层次一点点起泡到上层,也就是说,下层的DOM节点定义的事件处理函数,到了上层的节点如果还有和下层相同事件类型的事件处理函数,那么上层的事件处理函数也会执行。例如,<div>标签包含了<a>,如果这两个标签都有onclick事件的处理函数,那么执行的情况就是先执行<a>标签的onclick事件处理函数,再执行<div>的事件处理函数。如果希望<a>的事件处理函数执行完毕之后,不希望执行上层的<div>的onclick的事件处理函数了,那么就把cancelBubble设置为false即可

<div onclick="alert('div')">
<a href="#" onclick="alert('A');event.cancelBubble=true;">abc</a>
</div>

以上代码只会弹出A,不会弹出div,因为

3.二级DOM标准中的Event
  和IE不同的是,W3C DOM中的Event对象并不是window全局对象下面的属性,换句话说,event不是全局变量。通常在DOM二级标准中,event作为发生事件的文档对象的属性。Event含有两个子接口,分别是UIEvent和MutationEvent,这两个子接口实现了Event的所有方法和属性,而MouseEvent接口又是UIEvent的子接口,所以实现了UIEvent和Event的所有方法和属性。下面,我们就看看Event、UIEvent和MouseEvent的主要属性和方法。
  1.Event
    type:事件类型,和IE类似,但是没有“on”前缀,例如单击事件只是“click”。
    target:发生事件的节点。
    currentTarget:发生当前正在处理的事件的节点,可能是Target属性所指向的节点,也可能由于捕捉或者起泡,指向Target所指节点的父节点。
    eventPhase:指定了事件传播的阶段。是一个数字。
    timeStamp:事件发生的时间。
    bubbles:指明该事件是否起泡。
    cancelable:指明该事件是否可以用preventDefault()方法来取消默认的动作。
    preventDefault()方法:取消事件的默认动作;
    stopPropagation()方法:停止事件传播。
  2.UIEvent
    view:发生事件的window对象。
    detail:提供事件的额外信息,对于单击事件、mousedown和mouseup事件都代表的是点击次数。
  3.MouseEvent
   button:一个数字,指明在mousedown、mouseup和单击事件中,鼠标键的状态,和IE中的button属性类似,但是数字代表的意义不一样,0代表左键,1代表中间键,2代表右键。
   altKey、ctrlKey、shiftKey、metaKey:和IE相同,但是IE没有最后一个。
   clientX、clientY:和IE的含义相同,但是在DOM标准中,这两个属性值都不考虑文档的滚动情况,也就是说,无论文档滚动到哪里,只要事件发生在窗口左上角,clientX和clientY都是0,所以在IE中,要想得到事件发生的坐标相对于文档开头的位置,要加上document.body.scrollLeft和document.body.scrollTop。
   screenX、screenY:鼠标指针相对于显示器左上角的位置,如果你想打开新的窗口,这两个属性很重要。
   relatedTarget:和IE中的fromElement、toElement类似,除了对于mouseover和mouseout有意义外,其他的事件没什么意义。
(三)兼容于两种主流浏览器的拖动DOM元素的例子
  好了,刚才讲了这么多DOM编程和IE中的事件,那么如何编写兼容IE和Mozilla Firefox两种主流浏览器的拖拽程序呢?代码如下:
function beginDrag(elementToDrag,event)
{
  var deltaX=event.clientX-parseInt(elementToDrag.style.left);
  var deltaY=event.clientY-parseInt(elementToDrag.style.top);
  
if(document.addEventListener) 
{
  document.addEventListener("mousemove",moveHandler,true);
  document.addEventListener("mouseup",upHandler,true);
}
else if(document.attachEvent)
{
  document.attachEvent("onmousemove",moveHandler);
  document.attachEvent("onmouseup",upHandler);
  
}
  
  if(event.stopPropagation)   event.stopPropagation();
  else event.cancelBubble=true;
  if(event.preventDefault)  event.preventDefault();
  else event.returnValue=false;
  
  function moveHandler(e)  
  {
  if (!e) e=window.event; //如果是IE的事件对象,那么就用window.event
  //全局属性,否则就用DOM二级标准的Event对象。
    elementToDrag.style.left=(event.clientX-deltaX)+"px";
    elementToDrag.style.top=(event.clientY-deltaY)+"px";
    
     if(event.stopPropagation)   event.stopPropagation();
    else event.cancelBubble=true;
    
  }
  
  function upHandler(e)
  {
       if(document.removeEventListener)
    {
      document.removeEventListener("mouseup",upHandler,true);
      document.removeEventListener("mousemove",moveHandler,true);}
      else
    {
      document.detachEvent("onmouseup",upHandler);
      document.detachEvent("onmousemove",moveHandler);}
    }
      if(event.stopPropagation)   event.stopPropagation();
    else event.cancelBubble=true;
    
  }



学习3

获得浏览器的可用高度和宽度的兼容性写法:
	var WHGeter={
		getWidth : function(){
			return document.body.clientWidth;

		},
		getHeight : function(){
			return document.body.clientHeight;
		}
	};

var srcDom = e.target || e.srcElement;
alert(srcDom.tagName)

父级节点的兼容性写法:
Var paent = aDom.parentNode; //parentElement火狐不支持,chrome支持

事件委托的兼容性写法:例如
Document.body.onload = function(){doLoad();} (最好写这个)
或者:Document.body.onload = doLoad();(也可以实现)
但是不赞成:Document.body.onload = doLoad;因为FF和Chrome不支持

禁止用户选中文本的兼容性方法:FF使用css样式,IE使用JS
<div style="-moz-user-select:none;"
 onselectstart="return false;">aaaaaaaaaaaaaaaaaaaaa</div>


FF下实现圆角效果:-moz-border-radius:4px;border:1px solid red;
取消body的滚动条的兼容性写法(使用样式)style="overflow:hidden;"
只有IE认识scroll="no",FF和Chrome都不认识。

创建文本节点并插入
var dom = getDom("mydiv");
		var node =  document.createTextNode("Hello world");
		dom.insertBefore(node,getDom("mytxt"));//将文本插入在容器中指定元素(mytxt)的前边
		//dom.appendChild(node);//将文本插入容器的最后边。replaceChild

JS读取CSS样式主义的问题:
只有写在DOM元素的style中的属性才是可读的,通过css控制的样式JS并不能读出来。
div{color:red;	}<div style=" height:100px;"></div>
其中,JS可读取的是height,var h = div.style.height;// h = 100
但是color读不到。Var color = div.style.color;// color = “”(空)

DOM元素的克隆cloneNode():
var dom = getDom("mytxt");
		var newDom= dom.cloneNode();
		getDom("mydiv").appendChild(newDom);
克隆的dom元素和原始的对象一摸一样,但是不是一个引用,而是一个新的引用。所以,var newDom = dom 和 var newDom = dom.cloneNode()完全不同,因为后者的指针已经变了。克隆后,id一样,不要忘记用 setAttribute(“id” , “ another_id “);改变新的节点的ID。
JS移除DOM元素:removeChild
var dom = getDom("mytxt");
dom.parentNode.removeChild(dom); 使用父节点parentNode进行删除

第四季:
判断一个DOM元素是否有子元素:
<div style="border:1px solid red;height:3000px;" id="mydiv">
	aaaa<br/>
	<div>
		<input/>
		<img>
	</div>
	<input/>
</div>

var dom = getDom("mydiv");
dom.hasChildNodes(); 或者dom.childNodes.length

获取某一个DIV中的node的兼容性写法:

var dom = getDom("mydiv");
		var arr = dom.childNodes;
		var counter = 0;
		for(var i=0;i<arr.length;i++){
			if("#text"!==arr[i].nodeName){
				counter ++;
				JSLogger.log(arr[i].nodeName)
			}
		}
	JSLogger.log("counter = "+counter)
重要:DOM的直接包含的元素包括文字和标签和换行,而,文本,结尾标签和换行的nodeName都等于#text,所以要通过nodeName判断一下。


打印一个元素后边平级的所有有效的节点:(不算包含?)
var dom = getDom("mydiv2");
		var next = dom.nextSibling; // previousSibling 上一个平级节点
		while(next){
			if("#text"!==next.nodeName){
//打印容器的nodeName
				JSLogger.log(next. parentNode.nodeName)	;
			}
			next = next.nextSibling;
		}

网页输入HTML代码的最简单的写法:

var dom = getDom("mydiv").cloneNode(true);//true表示克隆内容
var html = dom.innerHTML.replace(/</g,"&lt;").replace(/>/g,"&gt;");//正则
JSLogger.log(dom);
 

去掉A标签点击后的虚线
<a href="#" hidefocus="true">点击后么有虚线</a>
<a href="#">点击后有虚线</a>

通过cloneNode方法添加新的Tr
<table>
	<tbody id="mytbody">
		<tr>
			<td>111</td>
			<td><input type="button"value="add" onclick="add(this)"></td>
		</tr>
	</tbody>
</table>
<script>
	function add(tdObj){
		var tbody = document.getElementById("mytbody");
		//JSLogger.log(tdObj.parentElement.parentElement);//仅IE支持
//全兼容写法
		var newTr = tdObj.parentNode.parentNode.cloneNode(true);
		tdObj.parentNode.innerHTML="";
		mytbody.appendChild(newTr);
	
	}
</script


“===”(“!==”)在JavaScript 中称为恒等(非恒等)运算符,在该运算符下进行比较运算是不会自动进行类型转换,并且只有类型和值都相等的情况下才视为相等。
下面讲讲如何将其他类型转换成boolean 类型:(两次非)

 


逻辑与逻辑或,和 短路与短路或

function iftrue(){
		JSLogger.log("iftrue")
		return true;
	}
	function iffalse(){
		JSLogger.log("iffalse");
		return false;
	}
	
	if(iftrue() && iffalse()){
		JSLogger.log("true");//iftrue,iffasle
	}
	if(iffalse() && iftrue()){
		JSLogger.log("true");//iffasle
	}

	if(iffalse() || iftrue()){
		JSLogger.log("true");//iffasle iftrue true
	}
	if(iftrue() || iffalse()){
		JSLogger.log("true");//iftrue true
	}
	//总结:&&短路与,只要出现false,就不继续往下走了
	//		||短路或,只要出现true,就不继续往下走了
	// | and &  前后条件都会进行。

Callee和caller的使用

function fool1(v1,v2){
		JSLogger.log("fool1");
		fool2(v1);
	}
	function fool2(v1){
		JSLogger.log("fool2");
		fool3();
	}

	function fool3(){
		var foo = arguments.callee;
		while(foo && (foo!=window)){//避免死循环的关键
			JSLogger.log("调用参数:");
			var args = foo.arguments;
			for(var i=0;i<args.length;i++){
				JSLogger.log("args["+i+"] = "+args[i]);
			}
			foo = foo.caller;
		}

	}
	fool1(1,2,3,4);
输出结果:
fool1
fool2
调用参数:
调用参数:
args[0] = 1
调用参数:
args[0] = 1
args[1] = 2
args[2] = 3	
args[3] = 4


简化:
function fool1(){
		JSLogger.log("fool1 ");
		JSLogger.log(arguments[0]);
		fool2();
	}
	function fool2(){
		JSLogger.log("fool2 ");
		var	caller = arguments.callee.caller;
		JSLogger.log(caller.arguments[0]);
	}

	fool1("Tom");
输出结果:
fool1 
Tom
fool2 
Tom

Call 和 apply的使用

function User(name){
		this.Name = name;
	}

	function test(){
		if(this==window){
			JSLogger.log("window 调用");
		}else{
			JSLogger.log("this.Name = "+this.Name);
		}
	}
	test();//window 调用
	var u1 = new User("Tom");
	var u2 = new User("Jack");
	
	test.call(u1);// this.Name = Tom
	test.apply(u2);// this.Name = Jack



<script language="javascript" defer="defer">
	alert("up");//defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。
	//虽然up在上边,但是设置了defer,所以会向下解析,等到文档全部解析结束之后再回回来再执行alert("up")
	//所以,运行结果是先弹出 down,然后弹出up
</script>
<script type="text/javascript">
//兼容XHTML的写法
//<![CDATA[  
	alert("down")
//]]>
//保证让相同代码在XHTML中正常运行的第二个方法,就是用一个CData 片段来包含JavaScript代码。在XHTML(XML)中,CData 片段是文档中的一个特殊区域,这个区域中可以包含不需要解析的任意格式的文本内容。因此,在CData 片段中就可以使用任意字符--小于号当然也没有问题,而且不会导致语法错误。
//在兼容XHTML的浏览器中,这个方法可以解决问题。但实际上,还有不少浏览器不兼容XHTML,因而不支持CData 片段。怎么办呢?再使用JavaScript注释将CData标记注释掉就可以了:
</script>
	var temp =[]
	function test(){
		var arr = ["a","b","c"]
		for(var i=0;i<arr.length;i++){
			var o={};
			var v = arr[i];
			o.say =  function(str){
				return function(){
					JSLogger.log(str)
				}
			}(v);

			temp.push(o);
		}
	}
	
	test();
	temp[0].say();

	var v ="BBB";//全局变量

	(function (v){
		v ="AAAA";//毕包中重新赋值
		alert(v);//AAAA
	})(v);
	alert(v);//BBBB 毕包中的操作不会影响包外
  相关解决方案