Html 在没有 display:none 或 JavaScript 的情况下使用 CSS 隐藏某些内容

Hide something with CSS without display:none or JavaScript

提问by rblanch

How can I hide the div without using display:noneor JavaScript?

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

In my country, a lot of Blackberrys come with the CSS support disabled (the mobile companies here are not so good to developers). I have text that says

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

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

I want to hide that once the user activates CSS support, but i can't use display:none;because it is only supported in BB firmware 4.6. It is a public site and I can't make all my visitors upgrade.

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

Does anybody knows a solution to this? I hope the question is easier to understand now.

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

Update: Thank you all for the answers but I can't use

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

• position:absolute
• overflow

• 位置：绝对
• 溢出

because they are available from Blackberry firmware 4.6 and up

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

回答by krusty.ar

This is a common way:

这是一种常见的方式：

margin-left: -9999;

margin-left: -9999;

回答by mfx

things to try:

尝试的事情：

• use the z-index to put it behind some other element
• move it off the screen by absolute positioning
• visbility: hidden
• make the content "invisible" by setting background to foreground color (works only for text)
• opacity: 0

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

but the real question is: why?

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

回答by Pim Jager

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

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

回答by Daniel Schaffer

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

Incidentally, this is what I do to preload images, which is nice because it doesn't use javascript.

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

Visibility:hidden won't do the same thing because some browsers are smart and won't make the request unless it thinks its actually visible.

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

回答by John_

Why not try the simple:

为什么不试试简单的：

position: absolute;
left: -1000px;

I can't see why it wouldn't work.

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

回答by mercator

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

是什么让您认为display: none4.6 版本之前不支持？您是否对此进行了测试，或者您是否正在查看他们的文档？

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 Referenceindeed mentions "Availability: BlackBerry? Device Software version 4.6 or later" for the display property, but their BlackBerry Browser 4.3 Content Developer Guideindicates that 4.3 already supported a very limited version of the displayproperty, including display: none. Versions before 4.3 don't support the displayproperty (again, going by the BlackBerry Browser developer documentation).

在BlackBerry浏览器4.6 CSS参考确实提到了“可用性：黑莓设备软件版本4.6或更高版本”的显示属性，但他们的BlackBerry浏览器4.3内容开发者指南表明，4.3已经支持非常有限版本的display财产，包括display: none。4.3 之前的版本不支持该display属性（同样，由BlackBerry Browser 开发人员文档提供）。

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?

你能假设你的用户至少有 4.3 版的固件，还是和假设他们有 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:

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

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

But then widthand heightare 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).

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

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.

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

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 altattribute. I don't know if setting its width and height to zero would still hide that alt text then.

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

回答by Steve Perks

I'm not sure of the percentages you're talking about that are using < 4.6, but if it's that important to you, then I can see a rationale for accepting that you can't please all the people all the time, and an acceptable cascading solution to this should be achievable. Probably with a link to explain the benefits of upgrading and enabling css.

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

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

BTW - you'd better make sure that you're css is good if you're telling someone to turn it on... :-)

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

回答by Abhilesh Srivastava

How about this:

这个怎么样：

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

Note: Please note the clip property does not work if "overflow:visible" is used.

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

In your case:

在你的情况下：

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

just add this css:

只需添加这个css：

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

回答by cLFlaVA

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

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

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

如果你反其道而行之，用 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>

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

这是一个小技巧，但不会显示禁用 JavaScript 的文本......

回答by Tom Ritter

You could position it absolutely off the screen.

您可以将其完全放置在屏幕之外。

But I, also, am not a mobile developer.

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