使用 CSS 隐藏内容而不显示：无或 JavaScript答案

【问题标题】：Hide something with CSS without display:none or JavaScript使用 CSS 隐藏内容而不显示：无或 JavaScript
【发布时间】：2010-09-26 16:05:15
【问题描述】：

如何在不使用display:none 或 JavaScript 的情况下隐藏 div？

在我的国家，很多黑莓手机都禁用了 CSS 支持（这里的移动公司对开发人员不太友好）。我有文字说

<div class="BBwarn">
please activate your css support and a link
</div>

一旦用户激活 CSS 支持，我想隐藏它，但我不能使用 display:none;，因为它仅在 BB 固件 4.6 中受支持。这是一个公共网站，我不能让所有访问者都升级。

有人知道这个问题的解决方案吗？我希望这个问题现在更容易理解。

更新：谢谢大家的回答，但是我不能用

位置：绝对
溢出

因为它们适用于 Blackberry 固件 4.6 及更高版本

【问题讨论】：

我知道你想要一个无 javascript 的解决方案，但我不禁想知道你为什么不能用 javascript 从 DOM 树中删除元素？
同一部手机默认禁用javascript

标签： html css blackberry mobile

【解决方案1】：

这是一种常见的方式：

margin-left: -9999;

【讨论】：

在这种情况下，请替换 div 中的文本：
如果您希望它消失，请升级您的设备
并使其变为红色粗体并闪烁（如果有效）：D

【解决方案2】：

要尝试的事情：

使用 z-index 将其放在其他元素的后面
通过绝对定位将其移出屏幕
可见性：隐藏
通过将背景设置为前景色使内容“不可见”（仅适用于文本）
不透明度：0

但真正的问题是：为什么？

【讨论】：

因为我希望在您激活 css 后警告消失
我用它来复制剪贴板，我需要可选择的元素，但隐藏的元素是不可选择的。这就是为什么。
另一个原因是前可访问性。
为什么？ datetime-local 输入具有可怕的日期时间格式[没有任何机会更改它]，但控制非常好。所以，仅仅因为重新发明轮子的格式是愚蠢的。如果使用display|visibility 隐藏输入，则无法使用click 事件触发它来显示它。因此，通过这个技巧，控件显示出来，用户可以进行选择并将值保存回输入标签。当我捕捉到onchange 事件时，我可以用我想要的任何方式格式化我的个性化日期时间字段。

【解决方案3】：

怎么样：

  visibility: hidden;

这应该隐藏 DIV，（请注意它仍将如何呈现但不可见，这意味着它将在文档中占用空间，就好像它是可见的一样，但不可见（不像 display:none; div 不会被渲染））。

【讨论】：

见上面 mfx 和我自己的 cmets。
是的，我在发帖后注意到了。

【解决方案4】：

<div style="height:0;width:0;overflow:hidden;">
<!-- content here -->
</div>

顺便说一句，这是我预加载图像的方法，这很好，因为它不使用 javascript。

Visibility:hidden 不会做同样的事情，因为一些浏览器很聪明，除非它认为它实际上是可见的，否则不会发出请求。

【讨论】：

我不明白为什么这比使用 javascript 更好？如果没有 JS 的人访问您的网站，他们会下载一堆他们永远不会看到的图像（假设这些图像用于翻转、灯箱等）

【解决方案5】：

为什么不尝试简单的：

position: absolute;
left: -1000px;

我不明白为什么它不起作用。

【讨论】：

在 4.6 之前的固件中不能使用位置，但是谢谢
确定-10000px ;)

【解决方案6】：

我不确定你所说的使用

height: 0; 
overflow: hidden;
visibility: hidden; 
color: #fff; 
background: #fff;

顺便说一句 - 如果你告诉别人打开它，你最好确保你的 css 是好的...... :-)

【讨论】：

很好——没想到使用颜色/背景色！也许折腾 font-size: 1px;?
@strager - 我认为这里的主要问题是你应该考虑这是多么重要。如果这很重要，那么如果向他们解释，为一些已经启用 css 的用户提供指向它的链接应该没什么大不了的
@Steve Perks 我正在考虑，但这是最后一个资源。

【解决方案7】：

是什么让您认为 display: none 在 4.6 版之前不受支持？您是否对此进行了测试，或者您是否按照他们的文档进行操作？

我也不是移动开发人员，所以我只是按照我从文档中收集到的内容进行。

BlackBerry Browser 4.6 CSS Reference 确实提到了 display 属性的“可用性：BlackBerry® Device Software 4.6 或更高版本”，但他们的 BlackBerry Browser 4.3 Content Developer Guide 表明 4.3 已经支持非常有限的 display 属性版本，包括 @987654326 @。 4.3 之前的版本不支持display 属性（同样是BlackBerry Browser developer documentation）。

您能否假设您的用户至少拥有 4.3 版固件，或者这与假设他们拥有 4.6 版一样不可接受？

您是否尝试过简单地将宽度和高度设置为零？我不熟悉黑莓（浏览器），但我怀疑它的 CSS 支持并不完美，当然在旧版本上。如果这有效，我不会感到惊讶：

.BBwarn {
    display: none; /* for 4.6 and up */
    width: 0px;    /* for 4.3 */
    height: 0px;
}

但是 width 和 height 仅支持从版本 4.3 开始的所有元素。在此之前，它们只能应用于<button> 和<img> 标签和一些<input> 类型（根据文档）。

因此，真正让它在所有 BlackBerry 固件版本上运行的最安全方法也许是使用图像作为警告，并使用 CSS 将其宽度和高度设置为零。

如果图像不是一个选项（可能是由于 lozalization 问题等），一个丑陋的 hack 可能是指定一个空/非法的图像源并将警告文本放在 alt 属性中。我不知道将其宽度和高度设置为零是否仍会隐藏该替代文本。

【讨论】：

【解决方案8】：

visibility: hidden; 可以工作，但该特定div 占用的空间仍会出现。如果您要使用否定的left-margin 方法，请记住您需要将对象的position 设置为absolute。

【讨论】：

【解决方案9】：

这个怎么样：

clip: rect(0,0,0,0);

注意：请注意，如果使用“溢出：可见”，则剪辑属性不起作用。

在你的情况下：

<div class="BBwarn">
  please activate your css support and a link
</div>

只需添加这个 css：

.BBwarn{
  position: absolute;
  clip: rect(0,0,0,0);
}

【讨论】：

【解决方案10】：

你可以把它放在屏幕之外。

但我也不是移动开发者。

【讨论】：

不使用边距我不知道该怎么做

【解决方案11】：

我假设您不想使用 JavaScript，因为黑莓不支持它。

如果你做相反的事情并使用 JavaScript 显示代码块，而不是试图隐藏它呢？

<script type="text/javascript"><!--
document.open();
document.writeln('<div class="BBwarn">');
document.writeln('please activate your css support and a link');
document.writeln('</div>');
document.close();
//--></script>

这有点小技巧，但不会显示禁用 JavaScript 的文本...

【讨论】：

您的解决方案不起作用，因为我想向禁用 css 和 javascript 的手机显示警告。还是谢谢。

【解决方案12】：

你可以做一些明智的事情：

.class{
opacity:0; overflow:hidden; visibility: hidden; height:0;
}

为了更精确，您可以添加：

color:transparent; background-color:transparent;

【讨论】：

【解决方案13】：

究竟是什么问题（前面提到的）

宽度：0 高度：0 可见性：隐藏

【讨论】：

【解决方案14】：

宽度：0 高度：0 可见性：隐藏

...并不总是适用于固件 2.2 及更早版本。有时您可以隐藏一个元素，但它会在某些击键后重新出现（例如下划线）。

【讨论】：

【解决方案15】：

或者你可以使用请启用Javascript

并使用显示“启用 CSS”的图片并使用“display:none”设置样式。

因此，只要启用相应的功能，这些警告就不会显示。

或者，我假设您正在使用一些服务器端代码？您可以尝试检测最常见的已知平台，这些平台支持特定版本的 css/javascript 并相应地提供内容。您甚至可能不必自己编写所有内容。

【讨论】：

【解决方案16】：

当我尝试在 BlackBerry Curve 8530 (OS 5.0) 中使用 javascript 自定义选择框时，我遇到了类似的问题。但是，创建的菜单无法隐藏，因为 css 以下属性仍然不起作用：

display
overflow
position: absolute
visibility
z-index

销毁和重新创建 HTML 元素也不起作用，所以我来到这里可以解决我的问题。我知道我的回答并不完全是关于这里提出的问题，但是当我遇到问题时，我想我不是唯一一个发生并且将会发生的人。

无论如何，即使这些 css 属性有效，我需要的是一些可以在大多数 BB 模型上工作的代码。

我的解决方案是使用此处找到的所有答案。这很简单。我做了两个类：

.element
{
    width: 100px;
    height: 100px;
    font-size: 12px;
    color: black;
    background-color: transparent;
    border: 1px solid black;
}
.element_hidden
{
    width: 0px;
    height: 0px;
    font-size: 0px;
    color: white;
    background-color: white;
    border: none;
}

是的。我为页面中的每种元素制作了两个。最初，所有类都设置为 class="element_hidden"，因此当鼠标悬停在选择框菜单上时，所有类都更改为 class="element"，并且它们被显示和隐藏，就好像它们被设为不可见/可见一样。

我希望这对某人有用！ ;D

【讨论】：

【解决方案17】：

我们可以使用 transform 属性沿 x 和 y 轴缩放元素。

. BBwarn{
   transform : scale(0,0);
}

【讨论】：

不幸的是，这似乎不适用于带有文字的span。

【解决方案18】：

我使用字体大小来获得这个，而不使用 display none

font-size: 0px;

【讨论】：

【解决方案19】：

正如您所说，您需要 Blackberry 版本低于 4.6 的解决方案，并且对于低于 4.6 的 Blackberry 版本支持的 CSS 属性很少，因此我们可以为此目的使用某种 hack。尝试将文本 color 设置为任何背景或将 font-size 设置为 0。这是一个 hack，但它使它不可见。运行以下 sn-p 并让我知道它是否适合您。

.alert1 {
    color: #fff; //3.8 or later
    
}

.alert2 {
    font-size: 0; //3.8 or later
}

<b>Alert1</b>
<div class="alert1">
please activate your css support and a link
</div>

<b>Alert2</b>
<div class="alert2">
please activate your css support and a link
</div>

【讨论】：