空DIV高度IE7 [英] Empty DIV height IE7

问题描述

更新1：

我发现当移除 width：100％从div，我得到的结果，我想要的interms它具有0高度，如果它不包含任何内容。但是，我需要div的宽度为100％，这是因为某种原因是强制它有一个没有内容的高度。

这里是一个jsfiddle的问题。如果您使用IE7，或者在IE6及以下版本，您只会看到这个问题。

http://jsfiddle.net/RQeeg/2/

ORIGINAL QUESTION：

我有一个空的div，由于某种原因有一个高度。

除非包含内容，否则不会显示。另一方面，IE7显示div，即使它没有内容。

因此，基本上，我想它的高度为0px，如果它是空的，并自动调整它的高度，如果它有内容。

解决方案

在启示之后更新你自己。使用 position：fixed ：

在这里支持IE7，必须使用两个 div s。我相当肯定没有办法绕过这个（除非你喜欢坚持一个 div 并使用JavaScript修复）。

请参阅：

没有内容： http：// jsfiddle。 net / r3P8D / 2 /

内容： http://jsfiddle.net/r3P8D/3 /

发生此错误的原因是因为一旦您添加了某些属性，例如 width：< not auto> code>或 position：fixed ，您可以触发 hasLayout 上的元素。一旦你触发 hasLayout ，就会发生这个错误。

因为你需要固定的（这在IE6甚至不工作，但我离题），没有方法避免 hasLayout ，因此没有办法避免这个错误。

最佳解决方法我可以想到。

---

旧答案：

但是，我需要div的
宽度为100％

不要使用 width：100％。

div 将具有默认的 width 值，即 auto 全部可用宽度。 width：auto 与宽度：100％不同。

在Chrome和IE6 / 7（没有内容）中检查这个问题：http://jsfiddle.net/r3P8D/

在Chrome和IE6 / 7（含内容）中选中此项： http://jsfiddle.net/r3P8D/1/

根据我对您问题的理解，这正是你要的。

UPDATE 1:

I've found that when removing width:100% from the div, I get the results I want interms of it having 0 height if it contains no content. However, I need the div to have a width of 100%, which for some reason is forcing it to have a height without content.

Here is a jsfiddle of the problem. You will only see the problem if you go to the following link with IE7, maybe on IE6 and below.

http://jsfiddle.net/RQeeg/2/

ORIGINAL QUESTION:

I have an empty div which has a height for some reason.

On Chrome, the div does not appear at all unless it contains content. IE7 on the other hand shows the div even if it has no content.

So basically, I want it to have a height of 0px if it is empty, and automatically adjust it's height if it has content. Which is exactly how it behaves if it does not have a width of 100%.

解决方案

Update after the revelation that you're using position: fixed:

To support IE7 here, you must use two divs. I'm reasonably sure there's no way round this (unless you'd prefer to stick with one div and use a JavaScript fix).

See:
Without content: http://jsfiddle.net/r3P8D/2/
With content: http://jsfiddle.net/r3P8D/3/

The reason that this bug happens is because once you add certain properties such as width: <not auto> or position: fixed, you trigger hasLayout on the element. As soon as you trigger hasLayout, this bug happens.

Because you require position: fixed (..which doesn't even work in IE6, but I digress), there is no way to avoid hasLayout, and hence no way to avoid this bug.

So, I've given you the best workaround I can think of.

---

Old answer:

However, I need the div to have a width of 100%

Simply don't use width: 100%.

The div will then have the default width value, which is auto, so it will take "the full available width". width: auto is not the same as width: 100%, but for the purposes of this question, it looks the same visually.

Check this in Chrome and IE6/7 (without content): http://jsfiddle.net/r3P8D/
Check this in Chrome and IE6/7 (with content): http://jsfiddle.net/r3P8D/1/

From my understanding of your question, this is exactly what you're asking for.

这篇关于空DIV高度IE7的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！