jquery - IE8显示: none elements pushing down anchor tag

标签 jquery html css internet-explorer-8

我有一个页面,该页面设置有一个输入文本字段,通过 JQuery toggle() 隐藏了“display: none”,并且 anchor 标记位于其下方一定距离处。当我使用 anchor 标记时,无论是通过在 url 中输入它还是通过单击引用它的链接,我通常希望它会把我带到 anchor 所在的正上方,如下所示:

working as expected http://i.snag.gy/1UavI.jpg

但是,当我在 IE8 上查看时,它看起来像这样:

not working as expected http://i.snag.gy/dbyty.jpg

我想要的是那里的隐藏输入字段,以及正确的 anchor 行为。

当我从代码中删除隐藏输入时,它固定了间距,这让我认为 IE 正在考虑将隐藏输入占用的空间考虑到屏幕上滚动到 anchor 的位置。

这是我尝试在 jsfiddle 上重现该问题的最佳尝试,但不幸的是我没有成功。我无法发布我看到错误的实际源代码,但我会尽力提供任何其他信息。

http://jsfiddle.net/Xynev/4/

最佳答案

让 anchor 在任何版本的 IE 中工作都没有任何问题。但是,我对您在 Fiddle 上的代码感到困惑,因为它没有反射(reflect)您实际要求的内容。

如果没有对问题进行某种清晰简洁的描述,就很难回答问题。虽然我已经根据您能够传达的内容构建了一个答案。

如果您想在单击 A 标签时切换文本字段。您可以使用以下 jQuery:

$('#testhide').click(function() {
   $('#hide').toggle();
});

testhide 将是 A 标签 ID。所以:

 <a id="testhide" href="#anchor-here">click here</a>

hide 是包含输入的 div 的名称(您可以随意命名)。所以:

<div id="hide" style="height:90px">
    <input id="hidden" type="text"/>
</div>

希望对您有所帮助。

这里是编辑过的 fiddle 的链接。

http://jsfiddle.net/Xynev/8/

关于jquery - IE8显示: none elements pushing down anchor tag,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11980367/

相关文章:

javascript - 查找与搜索匹配的歌曲(艺术家和/或轨道名称)

css - 按图像调整大小的 Flexbox div

html - 文字与图片对齐

javascript - 如何删除现有的http服务器?

html - 删除 <a> 标签内文本上下的空格

javascript - flex 元素是否有可能与它们上方的元素紧密对齐?

javascript - 从 PHP 更新 DIV 标签

JQuery 动画无法正常工作

javascript - 在首页显示过滤后的内容而不是显示所有内容

html - 创建一个带有微调器的提交按钮