js的兼容性怎么解决 我写的整个项目在其他浏览器上运行都没有问题,但是用IE的话就完全是一团糟,很事件没用,样式也没用,table的大小也变来变去,控件也有的大有的小,反正就是乱七八糟!我知道是js和css的兼容性问题,但是不知道怎么解决,恳求各位帮帮忙! 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 jquery 兼容性好找CSS兼容列表。 function DisplayFunTree(obj) { var funTree = document.getElementById("tableTree"); if (obj.checked) { funTree.style.display = ""; } else { funTree.style.display = "none"; } }在ie8中点击复选框,obj获不到值,报:未选中!这只是其中一个问题。然后排版的话是乱七八糟的,有什么好的解决方法没???<table id="corner" cellpadding="0" cellspacing="0" width="100%"> <tr><td> <table id="box" <%--width="1600px"--%> border="0" cellspacing="0" cellpadding="0" bgcolor="#CCD8E6" width="100%"> <tr id ="FunTreeTR" style="text-align:left"> <td rowspan="2" align="right" valign ="top"> <table cellpadding="0" cellspacing="0" border="0" style="border-color:Black; height: 550px; width:250px" id="tableTree"> <tr> <td valign="top" class="style1" style="text-align:left"> <asp:TreeView ID="FunTreeView" runat="server" ImageSet="Simple" onselectednodechanged="FunTreeView_SelectedNodeChanged" ontreenodepopulate="FunTreeView_TreeNodePopulate"> <ParentNodeStyle Font-Bold="False" ImageUrl="~/Images/nextn.gif" /> <HoverNodeStyle Font-Underline="True" ForeColor="#5555DD" /> <SelectedNodeStyle Font-Underline="True" ForeColor="#5555DD" HorizontalPadding="0px" VerticalPadding="0px" /> <NodeStyle Font-Names="Tahoma" Font-Size="10pt" ForeColor="Black" HorizontalPadding="0px" NodeSpacing="0px" VerticalPadding="0px" /> </asp:TreeView> </td> </tr> </table> </td> <td style="width:100%"> <table style="text-align:left; border-color:Black; width: 100%; height:540px"> <tr align="left"> <td valign="top" style="text-align:left; height:22px;background-image:url('file://E:/RundarWebSite/WebSite/Images/header1stCell_bg.gif')"> 当前位置 <label id="lblNodePosition"></label></td> </tr> <tr id="ChildForm" align="left"> <td align="left"> <table style="text-align:left;width:100%;" cellpadding="0" cellspacing="0"> <tr align="left"> <td align="right"> <asp:Image ID="Image5" runat="server" ImageUrl="~/Images/topLeft.jpg" height="14px" width="6px"/></td> <td valign="top" align="left"> <asp:Image ID="Image6" runat="server" ImageUrl="~/Images/header1stCell_bg.gif" height="14px" width="100%"/></td> <td> <asp:Image ID="Image7" runat="server" ImageUrl="~/Images/topRight.jpg" height="14px" width="6px"/></td> </tr> <tr> <td> <asp:Image ID="Image9" runat="server" ImageUrl="~/Images/left.jpg" background-repeat="repeat-y" width="6px" Height="492px"/> </td> <td valign="top"> <asp:ContentPlaceHolder ID="main" runat="server"> </asp:ContentPlaceHolder> </td> <td><asp:Image ID="Image10" runat="server" ImageUrl="~/Images/right.jpg" background-repeat="repeat" width="6px" Height="492px"/></td> </tr> </table> </td> </tr> </table> </td> <td align="left" style="width:900px"> </td> </tr> </table></td></tr> </table>这是模板页的table,其他子页面就乱七八糟了! js的两个兼容性问题js的兼容性 浏览器js兼容问题探讨也许你也喜欢用document.all.*的写法来取得一个页面元素的引用,那么这个习惯是很糟糕的,这个语法只有IE支持,火狐里面是不行的。两者都支持的方法是:document.getElementById(),如果你嫌这个方法输入太麻烦可以简化一下:var $=function (id){return document.getElementById(id);} 后面就可以这样写了$("div");这种简化偷师至Prototype 如果要取到页面元素的内容object.innerHTML是没有问题的,innerText在IE里通行,在火狐里面是textContent 也许你和我一样喜欢使用event.srcElement,但是在火狐里面是event.target,例如<input id="Button2" type="button" value="Test" onclick="alert(event.target.id)" />而且注意这里还有一个小问题,event必须作为参数传递进去;下面的方法是不对的: function TestEvent(){ alert(event.target.id);//这里火狐会提示event未定义}<input id="Button3" type="button" value="TestEvent" onclick="TestEvent(event)" />正确的写法:function TestEvent(event){ alert(event.target.id);}<input id="Button3" type="button" value="TestEvent" onclick="TestEvent(event)" /> 对于事件源我们还是期望有一个统一的使用方法,这里我们可以通过funciton.caller来暗度陈仓: function getEvent() { if(document.all) return window.event;//ie func=getEvent.caller;//这是该方法的关键 while(func!=null){ var arg0=func.arguments[0]; if(arg0){if((arg0.constructor==Event || arg0.constructor ==MouseEvent) || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)){return arg0;} } func=func.caller; } return null; } function getSrcElement() { var evt=getEvent(); var element=evt.srcElement || evt.target; return element; }function TestCommonEvent(){ var src=getSrcElement();//我们就可以使用这样一个统一的方式来获得事件源 alert(src.id);} 使用.net类库我们这里使用可以很方便的引入System.Xml.Xsl等namespace来进行XSLT转换。代码简单 XslTransform xslt = new XslTransform(); xslt.Load("print_root.xsl");XmlDocument doc = new XmlDocument();doc.Load("library.xml");// Create a new document containing just the result tree fragment.XmlNode testNode = doc.DocumentElement.FirstChild; XmlDocument tmpDoc = new XmlDocument(); tmpDoc.LoadXml(testNode.OuterXml);// Pass the document containing the result tree fragment // to the Transform method.Console.WriteLine("Passing " + tmpDoc.OuterXml + " to print_root.xsl");xslt.Transform(tmpDoc, null, Console.Out, null);数据是固定的只是转换一下样式,这种需求在Web应用中还是很常见的,我们知道这样大大减少了客户端与服务器端的往返次数和服务器端的计算压力。那么客户端有这个能力么?MSDN上我们也找到了使用Javascript进行客户端XSLT转换的解决方案 var xslt = new ActiveXObject("Msxml2.XSLTemplate.3.0");var xslDoc = new ActiveXObject("Msxml2.FreeThreadedDOMDocument.3.0");var xslProc;xslDoc.async = false;xslDoc.load("createProcessor.xsl");if (xslDoc.parseError.errorCode != 0) { var myErr = xslDoc.parseError; WScript.Echo("You have error " + myErr.reason);} else { xslt.stylesheet = xslDoc; var xmlDoc = new ActiveXObject("Msxml2.DOMDocument.3.0"); xmlDoc.async = false; xmlDoc.load("books.xml"); if (xmlDoc.parseError.errorCode != 0) { var myErr = xmlDoc.parseError; WScript.Echo("You have error " + myErr.reason); } else { xslProc = xslt.createProcessor(); xslProc.input = xmlDoc; xslProc.addParameter("param1", "Hello"); xslProc.transform(); document.getElementById("outputdiv").innerHTML=xslProc.output; }}找到解决方案我们并没有开心多久,你知道浏览器兼容是每一个 W3C DOM将document.implementation属性作为使脚本找出当前环境实现了哪些DOM模块的一个途径。最后的解决方案是这个样子: web开发者的隐忧,显然上面的解决方案太微软太IE了。我们需要冷静一下,我们的目标是要兼容Firefox。 1 function XsltTransform(xslfile) 2 3 { 4 5 if(typeof(window.ActiveXObject) != 'undefined') 6 7 { 8 9 //ie 10 11 try 12 13 { 14 15 var xmlDoc=new ActiveXObject("Msxml2.DOMDocument.3.0"); 16 17 var xslDoc = new ActiveXObject("Msxml2.FreeThreadedDOMDocument"); 18 19 xmlDoc.async=false; 20 21 xslDoc.async = false; 22 23 xmlDoc.loadXML(document.getElementById("xmlContent").value.replace(/\r\n/gi,"")); 24 25 xslDoc.load(xslfile); 26 27 28 29 var oTemplate = new ActiveXObject("Msxml2.XSLTemplate"); 30 31 oTemplate.stylesheet = xslDoc; 32 33 var oProcessor = oTemplate.createProcessor(); 34 35 oProcessor.input = xmlDoc.documentElement; 36 37 38 39 oProcessor.addParameter("parameter",'<%=count%>'); 40 41 oProcessor.transform(); 42 43 44 45 document.getElementById('div').innerHTML=oProcessor.output; 46 47 48 49 }catch(e){ 50 51 52 53 } 54 55 } 56 57 else if(document.implementation && document.implementation.createDocument) 58 59 { 60 61 //ff 62 63 try 64 65 { 66 67 var parser=new DOMParser(); 68 69 var xmlDoc; 70 71 if(document.getElementById("xmlContent").value == "") 72 73 xmlDoc = parser.parseFromString(text,"text/xml"); 74 75 else 76 77 xmlDoc = parser.parseFromString(document.getElementById("xmlContent").value.replace(/\r\n/gi,""),"text/xml"); 78 79 80 81 xmlDoc.async = false; 82 83 84 85 var xslDoc = document.implementation.createDocument("", "", null); 86 87 xslDoc.async = false; 88 89 xslDoc.load(xslfile); 90 91 92 93 // 定义XSLTProcessor对象 94 95 var xsltProcessor = new XSLTProcessor(); 96 97 xsltProcessor.importStylesheet(xslDoc); 98 99 xsltProcessor.setParameter(null, "parameter", '<%=count %>');100 101 // transformToDocument方式102 103 var result = xsltProcessor.transformToDocument(xmlDoc);104 105 document.getElementById('div').innerHTML = result.documentElement.textContent;106 107 }catch(e){ 108 109 }110 111 } 112 113 } 12种Javascript解决常见浏览器兼容问题的方法 关于Request.Querystring获取文件名的问题 服务器请求处理问题 (100分) asp.net 实现支付宝接口的调用 SilverLight动态增加行怎么实现? 比较两个日期相隔多少天?(C#) 怎么在Menu上加背景图 请教:我的首页为什么出不来呢? 如何防止别人利用URL访问自己的私藏资料? 询问一个Session的常识问题 再说webform和winform的控制,大家讨论下,看这个思路怎样 MVC3里面 怎么在一个视图里面显示多个模型 “利用反射调用当前页面方法”的不解
{
var funTree = document.getElementById("tableTree");
if (obj.checked)
{
funTree.style.display = "";
}
else
{
funTree.style.display = "none";
}
}
在ie8中点击复选框,obj获不到值,报:未选中!这只是其中一个问题。然后排版的话是乱七八糟的,有什么好的解决方法没???<table id="corner" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table id="box" <%--width="1600px"--%> border="0" cellspacing="0" cellpadding="0"
bgcolor="#CCD8E6" width="100%">
<tr id ="FunTreeTR" style="text-align:left">
<td rowspan="2" align="right" valign ="top">
<table cellpadding="0" cellspacing="0" border="0"
style="border-color:Black; height: 550px; width:250px" id="tableTree">
<tr>
<td valign="top" class="style1" style="text-align:left">
<asp:TreeView ID="FunTreeView" runat="server" ImageSet="Simple"
onselectednodechanged="FunTreeView_SelectedNodeChanged"
ontreenodepopulate="FunTreeView_TreeNodePopulate">
<ParentNodeStyle Font-Bold="False" ImageUrl="~/Images/nextn.gif" />
<HoverNodeStyle Font-Underline="True" ForeColor="#5555DD" />
<SelectedNodeStyle Font-Underline="True" ForeColor="#5555DD"
HorizontalPadding="0px" VerticalPadding="0px" />
<NodeStyle Font-Names="Tahoma" Font-Size="10pt" ForeColor="Black"
HorizontalPadding="0px" NodeSpacing="0px" VerticalPadding="0px" />
</asp:TreeView>
</td>
</tr>
</table>
</td>
<td style="width:100%">
<table style="text-align:left; border-color:Black; width: 100%; height:540px">
<tr align="left">
<td valign="top" style="text-align:left; height:22px;background-image:url('file://E:/RundarWebSite/WebSite/Images/header1stCell_bg.gif')">
当前位置 <label id="lblNodePosition"></label></td>
</tr>
<tr id="ChildForm" align="left">
<td align="left">
<table style="text-align:left;width:100%;" cellpadding="0" cellspacing="0">
<tr align="left">
<td align="right">
<asp:Image ID="Image5" runat="server" ImageUrl="~/Images/topLeft.jpg" height="14px" width="6px"/></td>
<td valign="top" align="left">
<asp:Image ID="Image6" runat="server" ImageUrl="~/Images/header1stCell_bg.gif" height="14px" width="100%"/></td>
<td>
<asp:Image ID="Image7" runat="server" ImageUrl="~/Images/topRight.jpg" height="14px" width="6px"/></td>
</tr>
<tr>
<td>
<asp:Image ID="Image9" runat="server" ImageUrl="~/Images/left.jpg"
background-repeat="repeat-y" width="6px" Height="492px"/>
</td>
<td valign="top">
<asp:ContentPlaceHolder ID="main" runat="server">
</asp:ContentPlaceHolder>
</td>
<td><asp:Image ID="Image10" runat="server" ImageUrl="~/Images/right.jpg"
background-repeat="repeat" width="6px" Height="492px"/></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td align="left" style="width:900px">
</td>
</tr>
</table>
</td>
</tr>
</table>这是模板页的table,其他子页面就乱七八糟了!
js的兼容性
也许你也喜欢用document.all.*的写法来取得一个页面元素的引用,那么这个习惯是很糟糕的,这个语法只有IE支持,火狐里面是不行的。两者都支持的方法是:document.getElementById(),如果你嫌这个方法输入太麻烦可以简化一下:var $=function (id){return document.getElementById(id);} 后面就可以这样写了$("div");这种简化偷师至Prototype
如果要取到页面元素的内容object.innerHTML是没有问题的,innerText在IE里通行,在火狐里面是textContent
也许你和我一样喜欢使用event.srcElement,但是在火狐里面是event.target,例如
<input id="Button2" type="button" value="Test" onclick="alert(event.target.id)" />
而且注意这里还有一个小问题,event必须作为参数传递进去;
下面的方法是不对的:
function TestEvent(){ alert(event.target.id);//这里火狐会提示event未定义}<input id="Button3" type="button" value="TestEvent" onclick="TestEvent(event)" />正确的写法:function TestEvent(event){ alert(event.target.id);}<input id="Button3" type="button" value="TestEvent" onclick="TestEvent(event)" />
对于事件源我们还是期望有一个统一的使用方法,这里我们可以通过funciton.caller来暗度陈仓:
function getEvent() { if(document.all) return window.event;//ie func=getEvent.caller;//这是该方法的关键 while(func!=null){ var arg0=func.arguments[0]; if(arg0){if((arg0.constructor==Event || arg0.constructor ==MouseEvent) || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)){return arg0;} } func=func.caller; } return null; } function getSrcElement() { var evt=getEvent(); var element=evt.srcElement || evt.target; return element; }function TestCommonEvent(){ var src=getSrcElement();//我们就可以使用这样一个统一的方式来获得事件源 alert(src.id);}
使用.net类库我们这里使用可以很方便的引入System.Xml.Xsl等namespace来进行XSLT转换。代码简单
XslTransform xslt = new XslTransform();
xslt.Load("print_root.xsl");
XmlDocument doc = new XmlDocument();
doc.Load("library.xml");
// Create a new document containing just the result tree fragment.
XmlNode testNode = doc.DocumentElement.FirstChild;
XmlDocument tmpDoc = new XmlDocument();
tmpDoc.LoadXml(testNode.OuterXml);
// Pass the document containing the result tree fragment
// to the Transform method.
Console.WriteLine("Passing " + tmpDoc.OuterXml + " to print_root.xsl");
xslt.Transform(tmpDoc, null, Console.Out, null);
数据是固定的只是转换一下样式,这种需求在Web应用中还是很常见的,我们知道这样大大减少了客户端与服务器端的往返次数和服务器端的计算压力。那么客户端有这个能力么?MSDN上我们也找到了使用Javascript进行客户端XSLT转换的解决方案 var xslt = new ActiveXObject("Msxml2.XSLTemplate.3.0");
var xslDoc = new ActiveXObject("Msxml2.FreeThreadedDOMDocument.3.0");
var xslProc;
xslDoc.async = false;
xslDoc.load("createProcessor.xsl");
if (xslDoc.parseError.errorCode != 0) {
var myErr = xslDoc.parseError;
WScript.Echo("You have error " + myErr.reason);
} else {
xslt.stylesheet = xslDoc;
var xmlDoc = new ActiveXObject("Msxml2.DOMDocument.3.0");
xmlDoc.async = false;
xmlDoc.load("books.xml");
if (xmlDoc.parseError.errorCode != 0) {
var myErr = xmlDoc.parseError;
WScript.Echo("You have error " + myErr.reason);
} else {
xslProc = xslt.createProcessor();
xslProc.input = xmlDoc;
xslProc.addParameter("param1", "Hello");
xslProc.transform();
document.getElementById("outputdiv").innerHTML=xslProc.output;
}
}找到解决方案我们并没有开心多久,你知道浏览器兼容是每一个 W3C DOM将document.implementation属性作为使脚本找出当前环境实现了哪些DOM模块的一个途径。最后的解决方案是这个样子: web开发者的隐忧,显然上面的解决方案太微软太IE了。我们需要冷静一下,我们的目标是要兼容Firefox。 1 function XsltTransform(xslfile)
2
3 {
4
5 if(typeof(window.ActiveXObject) != 'undefined')
6
7 {
8
9 //ie
10
11 try
12
13 {
14
15 var xmlDoc=new ActiveXObject("Msxml2.DOMDocument.3.0");
16
17 var xslDoc = new ActiveXObject("Msxml2.FreeThreadedDOMDocument");
18
19 xmlDoc.async=false;
20
21 xslDoc.async = false;
22
23 xmlDoc.loadXML(document.getElementById("xmlContent").value.replace(/\r\n/gi,""));
24
25 xslDoc.load(xslfile);
26
27
28
29 var oTemplate = new ActiveXObject("Msxml2.XSLTemplate");
30
31 oTemplate.stylesheet = xslDoc;
32
33 var oProcessor = oTemplate.createProcessor();
34
35 oProcessor.input = xmlDoc.documentElement;
36
37
38
39 oProcessor.addParameter("parameter",'<%=count%>');
40
41 oProcessor.transform();
42
43
44
45 document.getElementById('div').innerHTML=oProcessor.output;
46
47
48
49 }catch(e){
50
51
52
53 }
54
55 }
56
57 else if(document.implementation && document.implementation.createDocument)
58
59 {
60
61 //ff
62
63 try
64
65 {
66
67 var parser=new DOMParser();
68
69 var xmlDoc;
70
71 if(document.getElementById("xmlContent").value == "")
72
73 xmlDoc = parser.parseFromString(text,"text/xml");
74
75 else
76
77 xmlDoc = parser.parseFromString(document.getElementById("xmlContent").value.replace(/\r\n/gi,""),"text/xml");
78
79
80
81 xmlDoc.async = false;
82
83
84
85 var xslDoc = document.implementation.createDocument("", "", null);
86
87 xslDoc.async = false;
88
89 xslDoc.load(xslfile);
90
91
92
93 // 定义XSLTProcessor对象
94
95 var xsltProcessor = new XSLTProcessor();
96
97 xsltProcessor.importStylesheet(xslDoc);
98
99 xsltProcessor.setParameter(null, "parameter", '<%=count %>');
100
101 // transformToDocument方式
102
103 var result = xsltProcessor.transformToDocument(xmlDoc);
104
105 document.getElementById('div').innerHTML = result.documentElement.textContent;
106
107 }catch(e){
108
109 }
110
111 }
112
113 }