Question

这是什么原因？

在查看以前的开发人员编写的一些代码时，我经常会遇到：

#fac {
    position: absolute;
    left: -30000px;
    visibility: hidden;
    opacity: 0;
}

为什么他们这样做？仅仅display: none;有什么问题？

Answer 1

display:none和visibility:hidden;之间存在巨大差异。由于代码使用visibility:hidden;，元素空间将存在，因为它只是隐藏。如果代码具有display:none而不是可见性，则不需要使用负左值，因为该元素将没有空间。

+----------------------------+
|   header                   |
+----------------------------+
|                            |
|                            | I'm invisible only but I've space for it
+----------------------------+
|      footer                |
+----------------------------+


+----------------------------+
|   header                   |
+----------------------------+ I'm hidden and I don't have any space.
|       footer               |
+----------------------------+ 


+----------------------------+
|   header                   |
+----------------------------+--------------------------+
|      footer                |   I'm invisible          |
+----------------------------+   but positioned         |
                             |  absolutely, so user     |
                             |  doesn't see the space there
                             +--------------------------+

那么，实际上我应该使用哪一个？

这取决于网站的工作流程，例如参见@Naeem Shaikh回答。

Answer 2

这曾经被用来欺骗浏览器，因为谷歌这样的浏览器从未使用过这些浏览器。通过将内容推离页面，浏览器仍可以准备内容，从而有助于谷歌排名。

Answer 3

有时您无法使用display:none，您可以在此处看到示例 Open a color input with display:none via a label (webkit)，

（Aaron已经提到了更多案例在这里，您可以使用visibility:hidden并将元素的宽度填充和边距设置为0，例如：

1）这样：

input {
   visibility :hidden;
    width:0px;
padding:0;
margin:0;
}

2）或您分享的另一种方式

#fac {
    position: absolute;
    left: -30000px;
    visibility: hidden;
    opacity: 0;
}

3）或者这样做是这样的：

input {
    visibility:hidden;
    position:absolute;
}

Answer 4

我们无法给出正确的答案，为什么他们以这种方式隐藏元素。

点击某些<a>或其他元素时，他们可能会改变位置和不透明度。

有很多选项可以隐藏HTML元素

1）能见度：隐藏;它会隐藏元素，但仍然会有空间。

2）显示：无;它会隐藏div和元素

3）对于隐藏文本，您可以text-indent: -200px; font-size: 0等。

像这样的许多技巧都可以隐藏元素。

Answer 5

可见性：隐藏和不透明度：0在设置绝对位置和左-xxx时无效。

我们有时不得不使用该方法让Chrome在两步验证应用中自动保存Smart Lock中的正确用户名。

如果我们将其设置为none，则不会考虑输入值。使用隐藏的可见性会影响UI。使用position：absolute left：-xxx是最简单的方法，它一直运行Smart Lock。

注意：还要添加tabindex =“ - 1”以防止“tab”键导航到该输入。在密码字段之前添加该输入，chrome会找到它并将其值用作智能锁的“用户名”。

Answer 6

在某些较旧的浏览器（可能还有一些较新的浏览器）上，即使未设置display:none属性，也无法提交disabled的表单字段。您看到的代码可能是一种解决方法。见https://stackoverflow.com/a/8318442/64279

为什么使用position隐藏元素：absolute和left：-30000px;？

6 个答案: