html - 使用 CSS 隐藏内容而不显示：无或 JavaScript

Question

如何在不使用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 及更高版本中可用

score 15 · Accepted Answer

15

这是一种常见的方式：

margin-left: -9999;

于 2008-12-12T16:33:21.903 回答

score 13 · Accepted Answer

要尝试的事情：

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

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

score 11 · Accepted Answer

How about:

  visibility: hidden;

That should hide the DIV, (note how it will still be rendered but be invisible, that means it will take space in the document as if it was visible, but be invisible (unlike display:none; where the div will not be rendered)).

score 6 · Accepted Answer

为什么不尝试简单的：

position: absolute;
left: -1000px;

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

score 6 · Accepted Answer

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

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

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

score 6 · Accepted Answer

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

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

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

score 5 · Accepted Answer

What makes you think display: none is not supported before version 4.6? Did you test that, or are you going by their documentation?

I'm not a mobile developer either, so I'm just going by what I gleaned from the documentation.

The BlackBerry Browser 4.6 CSS Reference indeed mentions "Availability: BlackBerry® Device Software version 4.6 or later" for the display property, but their BlackBerry Browser 4.3 Content Developer Guide indicates that 4.3 already supported a very limited version of the display property, including display: none. Versions before 4.3 don't support the display property (again, going by the BlackBerry Browser developer documentation).

Can you assume your users do at least have firmware version 4.3, or is that just as unacceptable as assuming they have 4.6?

Have you tried simply setting the width and height to zero? I'm not familiar with the BlackBerry (Browser), but I'm sceptically assuming its CSS support is less than perfect, certainly on the older versions. I wouldn't be surprised if this worked:

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

But then width and height are only supported on all elements starting from version 4.3. Before that they could only be applied to <button> and <img> tags and some <input> types (according to the documentation).

So perhaps the safest way to really make it work on all BlackBerry firmware versions is to use an image for the warning, and use CSS to set its width and height to zero.

If an image is not an option (due to lozalization issues or so, perhaps), an ugly hack might be to specify an empty/illegal image source and put the warning text in the alt attribute. I don't know if setting its width and height to zero would still hide that alt text then.

score 3 · Accepted Answer

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

score 3 · Accepted Answer

这个怎么样：

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);
}

score 2 · Accepted Answer

I assume You don't want to use JavaScript because the Blackberrys don't support it.

What about if you did the opposite and displayed the block of code with JavaScript, rather than tried to hide it?

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

This is a bit of a hack, but would not display the text with disabled JavaScript...

score 2 · Accepted Answer

2

您可以将其绝对定位在屏幕之外。

但我也不是移动开发人员。

于 2008-12-12T16:32:33.560 回答

score 1 · Accepted Answer

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

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

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

color:transparent; background-color:transparent;

score 0 · Accepted Answer

0

到底有什么问题（前面提到的）

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

于 2008-12-20T02:48:33.193 回答

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

或者您可以使用请启用 Javascript

并使用显示“启用 CSS”的图像并使用“显示：无”设置样式。

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

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

score 0 · Accepted Answer

0

我使用字体大小来获得这个而不使用显示无

font-size: 0px;

于 2018-12-21T09:19:55.880 回答

score 0 · Accepted Answer

正如您在问题中所说，您需要针对4.6 以下的黑莓版本的解决方案，并且对于 4.6 以下的黑莓版本支持的 CSS 属性很少，因此我们可以为此目的使用某种 hack。尝试将文本设置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>

score 0 · Accepted Answer

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

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

html - 使用 CSS 隐藏内容而不显示：无或 JavaScript

19 回答 19

Related

Reference