【问题标题】:Problems with rendering of jquery tooltips on site现场渲染 jquery 工具提示的问题
【发布时间】:2011-01-11 04:10:50
【问题描述】:

我在on a site 工作,在 Jquery Tools Tooltip (http://flowplayer.org/tools/tooltip/index.html) 生成的标题上有弹出窗口。我对他们的问题是双重的:

1) 在 IE7/IE8 中,弹出窗口在页面加载时可见,导致页眉分开并分散在页面上。我写的 CSS 应该可以防止这种情况(它在 FF 中是这样),但它不起作用:

#container > section > header .trigger + *{
position:absolute;
left:-9999px;
z-index:1000;
}

由于未知的原因,如果我在 UL 中使用类 .trigger 将元素包装在元素下方,IE 会非常高兴。这是我最初设置 HTML 的方式,但我最终使用了 Jquery 选项卡并从 CSS 中清除了标题中提到的所有列表,所以我不知道为什么会这样。

2) 我的第二个问题是,当提交“写给我们”标题下的弹出窗口中的表单时,标题消失了,内容容器发生了变化。应该发生的是“谢谢”消息应该加载到联系表单所在的同一个弹出窗口中。由于表单是由我正在使用的 CMS 中的插件生成的,因此我理想地希望解决这个问题无需想办法让 JS 拦截插件的输出,但如果有必要我会。

这是表单的代码:

<form method="post" id="zcrc4246f0a2add167f83d1d4084631a0b4" class="zemContactForm" action="/qp2txp/#zcrc4246f0a2add167f83d1d4084631a0b4">
<div>
<input type="hidden" name="zem_contact_nonce" value="735c856baeffe5da43125cbf5a628084" />
<input type="hidden" name="zem_contact_form_id" value="c4246f0a2add167f83d1d4084631a0b4" />

<label for="Name" class="zemText zemRequired Name">Name</label><input type="text" id="Name" class="zemText zemRequired" name="Name" value="" maxlength="100" />

<label for="Email" class="zemText zemRequired Email">Email</label><input type="text" id="Email" class="zemText zemRequired" name="Email" value="" maxlength="100" />
<label for="Project" class="zemSelect zemRequired Project">Project</label>
<select id="Project" name="Project" class="zemSelect zemRequired">
<option>Branding</option>
<option>Print</option>
<option>Web</option>
<option>Interiors</option>

<option>Other (Please Describe)</option>
</select>
<label for="Message" class="zemTextarea zemRequired Message">Message</label><textarea id="Message" class="zemTextarea zemRequired" name="Message" cols="58" rows="8"></textarea><br>
<input type="submit" class="zemSubmit" name="zem_contact_submit" value="Send" />


</div>
</form>

还有 Jquery:

<script>
$(document).ready(function() {

$("header .trigger").tooltip({

position: 'bottom center',
offset: [30, -60],
relative: 'true',
delay: '70'

});

$("footer .trigger").tooltip({

position: 'top left',
offset: [-40, 100],
relative: 'true',
delay: '70'

});

});
</script>

任何帮助将不胜感激。我被难住了。

【问题讨论】:

    标签: javascript jquery css internet-explorer


    【解决方案1】:

    对于第一个问题,请尝试 display:none; 而不是 left:-9999px; 对于第二个问题,您需要发布代码。

    【讨论】:

    • 我试过 display:none,但在渲染方面并没有什么不同。出于可访问性的原因,我避免使用 none,但无论哪种方式,这都不是什么大不了的事。代码贴在上面。
    【解决方案2】:

    尝试更改您的 CSS + 选择器以应用 z-index。 + 选择器在 IE 系列中是有缺陷的(就像大多数有用的 CSS 声明一样)。

    http://www.quirksmode.org/css/contents.html

    【讨论】:

    • 现在在 IE8 中工作;我在 li 元素本身上设置了 z-index。尽管 z-index 设置为 100000,IE7 仍然显示内容后面的弹出窗口。
    • 您想将 z-index 应用于任何位置:绝对;所以在这种情况下,你希望它在你的
        上。理想情况下,您可以使用 .trigger + ul {z-index:1000;} 如果您能够向
          添加一个类并以这种方式添加 z-index。
    • .trigger + ul 上的 z-index 在 IE8 和 FF 中有效,但在 IE7 中仍然没有骰子。真正让我恼火的是,这是我第一次遇到 z-index 的问题。它在所有浏览器中都有效,直到我从嵌套的 div 中剥离了 UL。但我在我的代码中找不到任何会影响 IE7 中 UL 的 z-index 的内容。
    • 至于页眉消失。在样式表的第 216 行删除 float:left;从这个声明:#container > section > header > div 并从那里调试。从外观上看,您的一些容器可能需要 hasLayout 可以通过 put overflow:hidden; 来完成。在具有浮动的直接子元素的任何节点的父节点上。
    • 是的,如果 .trigger + ul 在 IE8 中工作,它不能在 7 中工作的唯一原因是因为 + 选择器不受支持。所以尝试向 UL 添加一个类并以这种方式应用 z-index。
    猜你喜欢
    • 2015-01-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-03-16
    • 2021-07-05
    • 1970-01-01
    • 1970-01-01
    • 2012-01-05
    相关资源
    最近更新 更多