这个简单的 CSS 在 IE 中有什么问题吗?

发布于 2024-07-10 20:35:25 字数 463 浏览 5 评论 0原文

有一个 div 具有内部内容,一个 div 的边框位于 div 内部。 不知何故,这个 div 被扩展以包含下一个 div。 这让我大吃一惊。

<div style="background: yellow;">
  <div>
    <div style="border: 1px solid black; background: green">green background</div>
  </div>
</div>
<div style="margin-top: 100px;">
  IE gives me a yellow background, unless i take away the border of the green 
  background div.
</div>

我想知道这个问题的原因以及如何解决。

There is a div that has inner content, a div with a border that's inside a div. Somehow, this div is expanded to encompass the next div. It blows my mind.

<div style="background: yellow;">
  <div>
    <div style="border: 1px solid black; background: green">green background</div>
  </div>
</div>
<div style="margin-top: 100px;">
  IE gives me a yellow background, unless i take away the border of the green 
  background div.
</div>

I'm wondering the cause of this and how to solve it.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

冷弦 2024-07-17 20:35:25

听起来你正处于过渡怪癖模式,这是邪恶的。

严格解决这个问题。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Sounds like you're in transitional quirksmode which is EVIL.

Strict solves this.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
咽泪装欢 2024-07-17 20:35:25

您需要为第一个 div“提供布局”。 您最好使用 IE6 目标样式来执行此操作:

<style>
   * html .haslayout {
       display:inline-block;
   }
</style>

...

<div style="background: yellow;" class="haslayout">

这是 hasLayout 属性的已知 IE6 问题。 在这里阅读更多信息 - http://www.satzansatz.de/cssd/onhavinglayout.html< /a>

You need to "give layout" to the first div. You better do this using IE6 targeted styles:

<style>
   * html .haslayout {
       display:inline-block;
   }
</style>

...

<div style="background: yellow;" class="haslayout">

This is a known IE6 issue with the hasLayout attribute. Read more on it here - http://www.satzansatz.de/cssd/onhavinglayout.html

冷了相思 2024-07-17 20:35:25

一种解决方案是将“position:relative”放在任何地方,但这会破坏我页面中的其他内容。

One solution is to put "position: relative" everywhere, but this breaks other things in my page.

紅太極 2024-07-17 20:35:25

您在内部 div 中缺少分号。 如果省略最后一个分号,我会看到一些非常奇怪的行为。

<div style="border: 1px solid black; background: green;">green background</div>

不确定您使用的是哪个版本的 IE,但这适用于 IE7

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Test</title>
  </head>  
  <body>
    <div style="background: yellow;">
     <div>
        <div style="border: 1px solid black; background: green;">green background</div>
      </div>
    </div>
    <div style="margin-top: 100px;">
      IE gives me a yellow background, unless i take away the border of the green 
      background div.
    </div>
  </body>
</html>

You are missing a semicolon in the inner div. I have seen some very weird behaviour if the last semicolon is omitted.

<div style="border: 1px solid black; background: green;">green background</div>

Not sure what version of IE you have, but this works in IE7

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Test</title>
  </head>  
  <body>
    <div style="background: yellow;">
     <div>
        <div style="border: 1px solid black; background: green;">green background</div>
      </div>
    </div>
    <div style="margin-top: 100px;">
      IE gives me a yellow background, unless i take away the border of the green 
      background div.
    </div>
  </body>
</html>
迷离° 2024-07-17 20:35:25

答案很简单,因为你嵌套了不同的 div,并且它们都没有高度,所以 IE6 会出现溢出。
这样做:

<div style="background: yellow;height: 1%;">

它会工作得很好。

The answer is verry easy, because you nesting diverent div's, and none off them has a height, so there is a overflow for IE6.
do this:

<div style="background: yellow;height: 1%;">

and it will work just fine.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文