Internet Explorer中的jquery问题 [英] jquery problem in Internet Explorer
本文介绍了Internet Explorer中的jquery问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试通过JQuery在数据列表中滑动.它正在Mozila，Chrome中运行
但它在IE中不起作用.数据列表的所有内容都垂直显示.但是我想水平显示在Mozila，Chrome中令人愉悦，但在IE中却没有.我正在尝试像这样...
脚本:-
I am trying to do sliding in datalist through JQuery. it is working in Mozila,Chrome
but it is not working in IE. All content of datalist displaying Vertically.But I want horizontally this is happining in Mozila,Chrome but not in IE.I am trying as like this...
SCRIPT:-
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.tinycarousel.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#slider1').tinycarousel();
});
</script>
HTML:-
HTML:-
<div id="slider1">
<a class="buttons1 prev" href="#">left</a>
<div class="viewport">
<asp:DataList ID="DataList1" CssClass="Datalist" runat="server" RepeatLayout="Flow" RepeatDirection="Horizontal" >
<HeaderTemplate>
<ul class="overview">
</HeaderTemplate>
<ItemTemplate>
<li>
<table>
<tr>
<td class="links">
<asp:HyperLink ID="hprJobtitle" runat="server" Target="_blank" Text='<%#Eval("Job_Title") %>' CssClass="links" Font-Size="14px" NavigateUrl='<%#Eval("Job_id","JobSummary.aspx?ID={0}") %>' ForeColor="Blue"></asp:HyperLink>
<asp:Label ID="Label9" runat="server" Text="(" Font-Size="11px"></asp:Label>
<asp:Label ID="Label6" runat="server" Text='<%#Eval("Experience_Min") %>' Font-Size="11px"></asp:Label>-
<asp:Label ID="Label7" runat="server" Text='<%#Eval("Experience_Max") %>' Font-Size="11px"></asp:Label>
<asp:Label ID="Label8" runat="server" Text="yrs)" Font-Size="11px"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label3" runat="server" Text='<%#Eval("CompanyName") %>' ForeColor="#669900"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label5" runat="server" Text='<%#Eval("CompanyProfile") %>' Font-Size="12px"></asp:Label>
</td>
</tr>
<tr>
<td align="right">
<asp:HyperLink ID="HyperLink2" runat="server" Target="_blank" Text=">>read more" CssClass="links" Font-Size="10px" NavigateUrl='<%#Eval("Job_id","JobSummary.aspx?ID={0}") %>' ForeColor="Blue"></asp:HyperLink>
</td>
</tr>
</table>
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:DataList>
</div>
<a class="buttons next" href="#">right</a>
CSS:-
CSS:-
#slider1 { height: 100%; overflow:hidden; padding: 0 0 10px; }
#slider1 .viewport { float: left; width:650px; height: 150px; overflow: hidden; position: relative; background-color:White }
#slider1 .buttons1 { background:url("../Images/hjbtn_lftInactive.png") no-repeat scroll 0 0 transparent; display: block; margin: 35px 0px 0 0; background-position: 0 -38px; text-indent: -999em; float: left; overflow: hidden; position: static; }
#slider1 .buttons { background:url("../Images/hjbtn_rgtActive.png") no-repeat scroll 0 0 transparent; display: block; margin: 35px 0px 0 0; background-position: 0 -38px; text-indent: -999em; float: left; overflow: hidden; position: relative; }
#slider1 .next { background-position: 0 0; height:100px; width:27px }
#slider1 .prev { background-position: 0 0; height:100px; width:27px }
#slider1 .disable { visibility: hidden; }
#slider1 .overview { list-style: none; position: absolute; padding: 0; margin: 0; width: 240px; left: 0; top: 0; }
#slider1 .overview li{ float: left; margin: 0 20px 0 0; padding: 1px; height: 121px; width: 236px;}
推荐答案
(文档).ready(function() {
(document).ready(function() {
('#slider1').tinycarousel(); }); < /script >
('#slider1').tinycarousel(); }); </script>
HTML:-
HTML:-
<div id="slider1">
<a class="buttons1 prev" href="#">left</a>
<div class="viewport">
<asp:DataList ID="DataList1" CssClass="Datalist" runat="server" RepeatLayout="Flow" RepeatDirection="Horizontal" >
<HeaderTemplate>
<ul class="overview">
</HeaderTemplate>
<ItemTemplate>
<li>
<table>
<tr>
<td class="links">
<asp:HyperLink ID="hprJobtitle" runat="server" Target="_blank" Text='<%#Eval("Job_Title") %>' CssClass="links" Font-Size="14px" NavigateUrl='<%#Eval("Job_id","JobSummary.aspx?ID={0}") %>' ForeColor="Blue"></asp:HyperLink>
<asp:Label ID="Label9" runat="server" Text="(" Font-Size="11px"></asp:Label>
<asp:Label ID="Label6" runat="server" Text='<%#Eval("Experience_Min") %>' Font-Size="11px"></asp:Label>-
<asp:Label ID="Label7" runat="server" Text='<%#Eval("Experience_Max") %>' Font-Size="11px"></asp:Label>
<asp:Label ID="Label8" runat="server" Text="yrs)" Font-Size="11px"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label3" runat="server" Text='<%#Eval("CompanyName") %>' ForeColor="#669900"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label5" runat="server" Text='<%#Eval("CompanyProfile") %>' Font-Size="12px"></asp:Label>
</td>
</tr>
<tr>
<td align="right">
<asp:HyperLink ID="HyperLink2" runat="server" Target="_blank" Text=">>read more" CssClass="links" Font-Size="10px" NavigateUrl='<%#Eval("Job_id","JobSummary.aspx?ID={0}") %>' ForeColor="Blue"></asp:HyperLink>
</td>
</tr>
</table>
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:DataList>
</div>
<a class="buttons next" href="#">right</a>
CSS:-
CSS:-
#slider1 { height: 100%; overflow:hidden; padding: 0 0 10px; }
#slider1 .viewport { float: left; width:650px; height: 150px; overflow: hidden; position: relative; background-color:White }
#slider1 .buttons1 { background:url("../Images/hjbtn_lftInactive.png") no-repeat scroll 0 0 transparent; display: block; margin: 35px 0px 0 0; background-position: 0 -38px; text-indent: -999em; float: left; overflow: hidden; position: static; }
#slider1 .buttons { background:url("../Images/hjbtn_rgtActive.png") no-repeat scroll 0 0 transparent; display: block; margin: 35px 0px 0 0; background-position: 0 -38px; text-indent: -999em; float: left; overflow: hidden; position: relative; }
#slider1 .next { background-position: 0 0; height:100px; width:27px }
#slider1 .prev { background-position: 0 0; height:100px; width:27px }
#slider1 .disable { visibility: hidden; }
#slider1 .overview { list-style: none; position: absolute; padding: 0; margin: 0; width: 240px; left: 0; top: 0; }
#slider1 .overview li{ float: left; margin: 0 20px 0 0; padding: 1px; height: 121px; width: 236px;}Check the which IE version you are using. The older IEs doesn''t support the HTML5. You''ve to make provision for that in your code.
For more details :
Making html5 work in old versions of Explore[^]
Check the which IE version you are using. The older IEs doesn''t support the HTML5. You''ve to make provision for that in your code.
For more details :
Making html5 work in old versions of Explore[^]
这篇关于Internet Explorer中的jquery问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
