使DIV在CSS和JavaScript中不可见 [英] Make DIV invisible in CSS and JavaScript

问题描述

通过将显示设置为无，将可见性设置为隐藏，我设法使DIV标签在JavaScript中不可见。

I have managed to make a DIV tag invisible in JavaScript by setting the display to none and the visibility to hidden. It can be achieved with this class also:

.invisible {
    display: none;
    visibility: hidden;
}

不显示将确保DIV框为空，而隐藏的可见性将确保它不可见。此方法的问题是，当我设置具有显示内容的可滚动DIV或文本区域时，在设置显示时：没有，某些浏览器会忘记这些元素的滚动位置。有没有更好的方法可以使DIV不可见而不使用display属性？我宁愿不使用JavaScript来记录滚动位置等。

Display none will ensure the DIV box is empty, and visibility hidden will ensure it isn't visible. The problem with this method is when I have scrollable DIVs or textareas with overflowing content, when you set display: none, some browsers will forget the scroll position for these elements. Is there a better way to make a DIV invisible without using the display property? I would rather not resort to using JavaScript to record the scroll position and such if possible.

EDIT：

我设法在您的帮助下解决了这个问题，我应用了以下内容：

I managed to solve it with your help, I applied the following:

.invisible {
    visibility: hidden;
    position: absolute;
    top: -9999px;
}

.visible {
    visibility: visible;
    position: static;
}

我尝试过左移：-9999px，但这扩展了IE中的垂直滚动条。 ..我也将文本区域包裹在另一个DIV中，并对其应用了可见/不可见样式，因为否则文本区域将失去其滚动位置。我在iPhone上的Chrome，Firefox，IE和Safari中对此进行了测试。请注意，在FF中，环绕文本区域的DIV似乎没有帮助，滚动条仍会重置。但是可滚动的DIV现在很好。谢谢您的帮助！

I tried left: -9999px, but this expands the vertical scrollbar in IE... I also wrapped my textarea in another DIV and applied the visible/invisible styles to that, because the textarea would lose its scroll position otherwise. I tested this in Chrome, Firefox, IE and Safari on my iPhone. Just a note, the DIV wrapped around the textarea didn't seem to help in FF, and the scrollbar still reset. But the scrollable DIVs are fine now. Thanks for your help!

推荐答案

这可能会起作用：

.invisible {
    position: absolute;
    left: -9999px;
}

编辑：我来看看常用助手 HTML5 Boilerplate代码中的内容，以探索使事物消失的其他方法。

I would take a look at the common helpers in the HTML5 Boilerplate code to explore other ways of making things disappear.

这篇关于使DIV在CSS和JavaScript中不可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！