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>

这是我的标签页＆amp;形式：

<%@ 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>

tab-0中有一个空白表单，因为Firefox拒绝提交首先列出的任何表单（由于某种原因），所以这是一个草率的修复。无论哪种方式，它在IE中都不起作用。

Firefox看起来应该是这样。但是，在IE9中，我无法在选项卡之间切换，并且所有表单最终都会垂直向下列在页面中。这些表单（例如它们）在IE中可以正常工作，但显然将它们置于jquery选项卡后面是因为它们不会同时显示。

IE8工作得更好 - 它会在标签之间切换，只列出活动标签的表单，但它会将表单颠倒到页面的中间位置。 IE的两个版本都存在某种明显的问题，并且还在左侧边栏中将内容压缩到了左侧。

如果我将选项卡中的内容更改为任何不是a的内容，那么选项卡将在IE中运行。我们在另一个页面（http://www.stmartin.edu/social/）上有相同的标签，它们很好，所以无论出于什么原因，它绝对是不想玩得好的领域。

非常感谢任何帮助或建议。谢谢！

Answer 1

尝试关闭input-tags

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

所有输入标记都已打开。不确定这是不是问题，但试一试 - 也许设置一个jsfiddle。

Answer 2

由于兼容模式在IE9中有效，我强制使用meta标签进行IE7仿真：

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

它有效，但它不是一个超级解决方案。其他建议仍然受到欢迎。

带有HTML表单的jQuery UI选项卡：在Firefox中工作，在IE中使用Broken

2 个答案: