的jQuery UI選項卡以HTML形式：在Firefox中工作，打破了IE

Question

編輯：這裏的的jsfiddle，這表明，它應該工作的頁面 - http://jsfiddle.net/KH3bs/3/

EDIT2：工作在IE9上兼容模式，不如果它關閉，則工作。

如果我將其他代碼放在我的選項卡中，它們在Firefox和IE中都可以很好地工作。然而，我想要的是我的選項卡中的表單，只要我這樣做，他們就會在IE中破解（我特別使用IE9）。

這些被稱爲主文件中的腳本和樣式表：

<link href="http://www.stmartin.edu/styles/global.css" rel="stylesheet" type="text/css" /> 
<link href="http://www.stmartin.edu/styles/2col.css" rel="stylesheet" type="text/css" /> 
<link href="http://www.stmartin.edu/library/css/OGrady.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> 
<script language="JavaScript" src="http://www.stmartin.edu/scripts/global.js" type="text/javascript"></script> 

這是網頁與我的標籤&形式：

<%@ Page Language="VB" masterpagefile="_master/content_2_column.master" title="Saint Martin's University" %> <asp:Content id="Content1" runat="server" contentplaceholderid="headerImage"> 
<img alt="" src="images/libBicycle.jpg" width="1130" height="149" /> 

<link rel="stylesheet" href="../social/styles/jquery-ui-1.8.16.custom.css" /> 

       <script> 
       $(function() { 
           $("#tabs").tabs(); 
       }); 
       </script> 

       <style type="text/css"> 

       #tabs { 
                   display:block; 
                   overflow:auto; 

} 

       </style> 

</asp:Content> 


<asp:Content id="Content2" runat="server" contentplaceholderid="pageContent"> 

<h1>O&#39;Grady Library</h1> 

<p style="font-weight=bold;">Quick search</p> 

<div id="tabs" style="width: 103%; font-size: .8em;">   
     <ul> 
      <li style="width: 23%;"><a href="#tabs-1">Books</a></li> 
      <li style="width: 23%;"><a href="#tabs-2">Articles</a></li> 
      <li style="width: 23%;"><a href="#tabs-3">DVDs</a></li> 
      <li style="width: 23%;"><a href="#tabs-4">Everything</a></li> 
     </ul>  

     <div id="tabs-0"> 
      <form class="search" action="http://stmartin.worldcat.org/search" method="get"> 
      </form> 
     </div> 


     <div id="tabs-1"> 
      <h2>Search the Library Catalog for Books</h2> 
     <form class="search" action="http://stmartin.worldcat.org/search" method="get"> 
      <input type="hidden" name="fq" value="x0:book"> 
      <input type="text" maxlength="65" size="30" name="q"> 
      <input type="submit" value="GO"> 
      </form> 
     </div> 

     <div id="tabs-2"> 
      <h2>Search the Library Catalog for Articles</h2> 
      <form class="search" action="http://stmartin.worldcat.org/search" method="get"> 
      <input type="hidden" name="fq" value="x0:artchap"> 
      <input type="text" maxlength="65" size="30" name="q"> 
      <input type="submit" value="GO"> 
     </form> 
     </div> 

     <div id="tabs-3"> 
      <h2>Search the Library Catalog for DVDs</h2> 
      <form class="search" action="http://stmartin.worldcat.org/search" method="get"> 
      <input type="hidden" name="fq" value="x0:video"> 
      <input type="text" maxlength="65" size="30" name="q"> 
      <input type="submit" value="GO"> 
     </form> 
     </div> 

     <div id="tabs-4"> 
      <h2>Search the Library Catalog for Everything</h2> 
      <form class="search" action="http://stmartin.worldcat.org/search" method="get"> 
      <input type="text" maxlength="65" size="30" name="q"> 
      <input type="submit" value="GO"> 
     </form> 

     </div> 
     </div> 



</asp:Content> 

<asp:Content id="Content3" runat="server" contentplaceholderid="rightContent"> 

<h1>Library hours Spring 2012</h1> 

<table cellspacing="0"> 
<tr> 
<td>Mon-Thu </td> 
<td align="right">7:30 am</td> 
<td align="center">-</td> 
<td align="right">11 pm</td></tr> 
<tr> 
<td>Fri</td> 
<td align="right">7:30 am</td> 
<td align="center">-</td> 
<td align="right">5 pm</td></tr> 
<tr> 
<td>Sat</td> 
<td align="right">10 am</td> 
<td align="center">-</td> 
<td align="right">6 pm</td></tr> 
<tr> 
<td>Sun</td> 
<td align="right">1 pm</td> 
<td align="center">-</td> 
<td align="right">9 pm</td></tr> 
</table> 


<p>&nbsp;<br /> 
<a href="about/hours.aspx">See details</a> for holidays<br /> 
<a href="../about/ClosurePolicy.aspx">Campus closure policy</a></p> 
<p><a href="jobs/"><strong>Employment opportunities</strong></a></p> 


<p> 
<a href="guides/bridge.aspx"> Personal Librarian</a> program</p> 

</asp:Content> 

有在標籤空白表單因爲Firefox拒絕提交首先列出的任何表單（出於某種原因），所以這是一個馬虎的修復。無論哪種方式，它在IE中不起作用。

Firefox看起來應該完全一樣。但是，在IE9中，我無法在選項卡之間切換，並且所有表單最終都會一次性垂直列出頁面。這些表單在IE中可以工作，但顯然把它們放在jQuery選項卡後面的目的是讓它們不會同時顯示。

IE8工作得更好 - 它將在選項卡之間切換，並只列出活動選項卡的表單，但會將表單向下顛倒到頁面的一半。 IE的兩個版本都有一些明顯的問題，並且也在左邊的邊欄中將內容往下壓。

如果我將選項卡中的內容更改爲任何不是那麼那麼選項卡將在IE中工作。我們在另一個頁面上有相同的標籤（http://www.stmartin.edu/social/），它們都很好，所以無論出於何種原因，它絕對是不想玩的好地方。

任何幫助或建議，非常感謝。謝謝！

Answer 1

嘗試關閉輸入標籤

<input type="text" maxlength="65" size="30" name="q" /> 

所有輸入標籤是開放的。不知道這是否是問題，但嘗試一下 - 可能會設置一個jsfiddle。

Answer 2

由於兼容性模式在IE9工作，我不得不IE7仿真與meta標籤：

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 

它的工作原理，但它不是一個超級的解決方案。其他建議仍然受歡迎。