Question

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

在我的国家，许多Blackberrys都禁用了CSS支持（这里的移动公司对开发人员来说并不是那么好）。我有文字说

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

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

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

更新：谢谢大家的答案，但我不能使用

位置：绝对
溢出

因为它们可从Blackberry固件4.6及更高版本获得

Answer 1

这是一种常见的方式：

margin-left: -9999;

Answer 2

要尝试的事情：

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

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

Answer 3

是什么让你觉得版本4.6之前不支持display: none？你测试过它，或者你是按照他们的文档进行测试的？

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

BlackBerry Browser 4.6 CSS Reference确实提到了显示属性的“可用性：BlackBerry®DeviceSoftware 4.6或更高版本”，但他们的BlackBerry Browser 4.3 Content Developer Guide表示4.3已经支持{{1}的非常有限的版本} property，包括display。 4.3之前的版本不支持display: none属性（再次通过BlackBerry Browser developer documentation）。

你能否认为你的用户至少拥有固件版本4.3，或者就像假设他们有4.6一样不可接受？

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

display

但是只有从版本4.3开始的所有元素都支持.BBwarn { display: none; /* for 4.6 and up */ width: 0px; /* for 4.3 */ height: 0px; }和width。在此之前，它们只能应用于height和<button>标记以及一些<img>类型（根据文档）。

因此，真正使其适用于所有BlackBerry固件版本的最安全方法是使用图像作为警告，并使用CSS将其宽度和高度设置为零。

如果图像不是一个选项（可能是由于lozalization问题左右），丑陋的黑客攻击可能是指定一个空的/非法的图像源，并将警告文本放在<input>属性中。我不知道将宽度和高度设置为零仍会隐藏那个替代文字。

Answer 4

怎么样：

  visibility: hidden;

那应该隐藏DIV，（注意它仍然会被渲染但是看不见，这意味着它会占用文档中的空间，就好像它是可见的，但是不可见（不像display：none; div不会被渲染））。

Answer 5

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

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

可见性：隐藏不会做同样的事情，因为有些浏览器很聪明，除非它认为它实际上是可见的，否则不会发出请求。

Answer 6

为什么不试试这个简单的：

position: absolute;
left: -1000px;

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

Answer 7

我不确定你所说的百分比是否正在使用＆lt; 4.6，但如果这对你来说很重要，那么我可以看到接受你不能一直讨好所有人的理由，并且可以实现一个可接受的级联解决方案。可能有一个链接来解释升级和启用css的好处。

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

顺便说一下 - 如果你告诉别人打开它，你最好确保你的css很好......： - ）

Answer 8

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

如果你做了相反的事情并用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的文本...

Answer 9

你可以把它完全放在屏幕上。

但我也不是移动开发者。

Answer 10

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

Answer 11

如何？

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

注意：请注意，如果使用“ overflow：visible”，则clip属性不起作用。

在您的情况下：

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

只需添加此CSS：

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

Answer 12

（前面提到的）

究竟出了什么问题

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

Answer 13

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

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

Answer 14

或者您可以使用请启用Javascript

使用“启用CSS”的图像并使用“display：none”设置样式。

因此，无论何时启用相应的功能，这些警告都不会显示。

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

Answer 15

当我尝试在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

Answer 16

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

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

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

color:transparent; background-color:transparent;

Answer 17

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

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

Answer 18

我使用字体大小来获取字体，而没有使用显示

font-size: 0px;

Answer 19

正如您所说的那样，您需要针对 4.6以下的Blackberry版本的解决方案，并且4.6以下的Blackberry版本几乎不支持CSS属性，因此我们可以为此使用某种技巧。尝试将文本color设置为背景，或将font-size设置为0。这是一个hack，但是它使其不可见。运行以下代码段，让我知道它是否适合您。

.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>

使用CSS隐藏某些内容而不显示：none或JavaScript

19 个答案: